[JS] JQuery 윈도우 Event Methods

JQuery Event Methods

jQquery 에서 사용되는 윈도우 이벤트 종류에 대해 알아보겠습니다.

이벤트란?

웹 페이지가 응답할 때 발생하는 작업을 이벤트라고 합니다. 이 이벤트는 어떠한 일이 발생하는 정확한 순간을 의미합니다.

 

예를 들어 아래와 같은 이벤트를 사용할 수 있게 됩니다.

• 특정 요소에 마우스 Focus 
• 요소 클릭
• 로딩이 끝난 후 작동 등...

일반적인 이벤트 종류

일반적으로 많이 사용되는 이벤트의 종류에 대해 알아보겠습니다.

문서 로딩 이벤트

ready() : 문서 로딩 - html의 문서가 로딩되었음을 알린다. (이미지, 동영상 등은 영향을 끼치지 않음)

• $(document).ready(function() { });
• $(function() { });
• 위 코드를 사용하게 되면 body 태그 내 모든 코드를 읽은 후, 호출이 되는 onload 기능이다.

// HTML의 문서가 로드되고 나면 .loader 요소를 숨긴다.
$(document).ready(function(){
    setTimeout(function() {
      $(".loader").fadeOut(200);
    }, 2000);
});

load() : 파일 로딩 - 네트워크를 통해 해당 문서의 모든 리소스를 불러왔음을 알린다.

• $(select).load(url [, data] [, callback]);  // JQuery
• $('선택').load('url', '익명 함수 또는 콜백 함수');

속성	설명
url	데이터를 받을 URL을 나타내는 문자열 (필수 선택)
data	서버에 POST 로 요청을 보낼 때 파라미터 값 (선택사항)
callback	매치되는 요소에 삽입한 후에 실행할 콜백 함수 (선택 사항) 콜백 함수에 사용될 매개변수는 다음을 사용 ➜ responseText: 요청이 성공하면 결과 내용을 받음 ➜ statusText: 요청 상태를 텍스트로 반환. success 나 error 와 같은 요청 상태 문자열 ➜ xhr: XMLHttpRequest 객체를 받음 상태와 상태 코드를 갖고 있는 객체

• 페이지를 load 하고 싶은 element의 속성 값을 이용해서 JSP page를 load 할 수 있다.
• locatin.href='' 처럼 URL을 적어주면 되는데 parameter값도 넘길 수 있고, Controller에 명시되어 있는 경로를 적어주면 된다.
• 원하는 element에 유동적으로 페이지를 로드하고 싶을 때 유용하게 사용할 수 있다.

브라우저 이벤트

resize() : 브라우저 크기 조절 이벤트 - .resize() 이벤트는 윈도우 크기가 바뀔 때 어떠한 작업을 할 수 있게 한다.

• $(window).resize(function() { });   // JQuery
• window.addEventListener('resize', function() { });  // Javascript
• 모바일 / 데스크탑에 따라 다른 이벤트 동작이 필요한 경우
• 반응형 웹 구현 시 CSS를 사용하지 않고 스크립트를 사용하는 경우

window.addEventListener('resize', function() {
  console.log('Resizing event...');
});

TIP

 

 

resize 이벤트 최적화
주의할 점은 resize() 이벤트는 브라우저 크기에 따라 계속 구문을 사용하기 때문에 브라우저의 성능을 크게 저하시킬 수 있습니다. 때문에 이러한 이벤트는 최적화가 필수입니다.

예를 들어 requestAnimationFrame, debounce, setTimeout() 메서드를 사용하여 100ms 단위로 제한하는 방법을 함께 사용하면 좋습니다.

인파님의 블로그에 좋은 코드가 있어 가져왔습니다.

 

최적화 진행 전 코드

//Javascript
window.addEventListener('resize', function() {
    console.log('resize event!');
    if (window.innerWidth <= 800) {
        console.log('현재 브라우저 크기가 <= 800px');
    };
});

---

최적화 진행 후 코드

var delay = 300;
var timer = null;
 
//Javascript
window.addEventListener('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		console.log('resize event!');
        if (window.innerWidth <= 800) {
      		console.log('현재 브라우저 크기가 <= 800px');
   		}
	}, delay);
});

//jQuery
$(window).on('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		console.log('resize event!');
        if (window.innerWidth <= 800) {
      		console.log('현재 브라우저 크기가 <= 800px');
    	}
	}, delay);
});

이 코드를 사용하면 resize 될 때마다 코드가 실행되는 것이 아닌 resize를 마치면 코드가 실행됩니다. 

 

즉, 0.3초 동안 resize를 하지 않는다면 setTimeout() 메서드 안의 코드가 실행됩니다.

마우스 이벤트

• click() : 해당 요소를 클릭 시 발생
• dbclick() : 해당 요소를 더블 클릭 시 발생
• mouseenter() : 마우스 포인터가 해당 요소로 진입할 때 발생
• mouseleave() : 마우스 포인터가 해당 요소 밖으로 벗어났을 때 발생
• mouseover() : 마우스가 해당 요소 위로 움직일 때 발생
• mouseout() : 마우스가 해당 요소 밖으로 움직일 때 발생
• mouseup() : 마우스 버튼에서 손을 떼었을 때 발생
• mousedown() : 마우스 버튼을 누를 때 발생
• mousemove() : 마우스 포인터가 이동할 때 발생. 마우스 커서가 해당 요소 내를 움직일 때 또는 커서의 위치 확인에 유용함
• hover() : 위 둘(mouseover, mouseout)을 동시에 행동할 때 발생
• focusin()
• focusout()

키 이벤트

• keydown() : 키를 누를 때 발생
• keyup() : 키에서 손을 떼었을 때 발생
• keypress() : 키를 눌러 문자가 연결되었을 때 발생 (화면에 글자(value)가 완성되는 경우에만 발생됨)

폼 이벤트

• focus() : 포커스를 얻을 때 발생 (input 등의 태그에 사용)
• blur() : 포커스를 잃을 때 발생
• submit() : form 전송
• change() : form 필드에서 요소 값 변경 (input, select, textarea 등)
• select() : 텍스트 상자/영역에서 영역을 선택

기본 이벤트

요소에 이벤트를 연결하지 않아도 기본적으로 실행되는 이벤트

• a : 우측 마우스 클릭 - ContextMenu 발생
• form 요소 내부의 submit 버튼 클릭 : 지정된 경로로 내용을 전송하는 이벤트

이벤트 연결 및 처리

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러 함수를 사용해야 합니다. 이 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트 바인딩이라고 합니다.

$("body").on({'click': function() { }}, '');
$("body").on('click', '', function() { });

on() : 특정 요소에 이벤트 바인딩을 위해 .on() 메서드를 사용한다.

• 선택한 요소에 어떤 타입의 이벤트라도 연결 가능
• 하나의 이벤트 핸들러에 여러 개의 이벤트 동시 연결 가능
• 선택한 요소에 여러개의 이벤트 핸들러와 여러 이벤트 같이 연결 가능

$("p").on("mouseenter mouseleave", function() {
  $(".someDiv").append("마우스 커서가 문장 위로 들어오거나 빠져 나갔습니다.");
});

여러개의 이벤트를 같이 바인딩할 수 도 있습니다.

$("p").on({ 
  click: function() {
    $(".someDiv").append("마우스가 문장을 클릭했습니다.<br>");
  },
  mouseenter: function() {
    $(".someDiv").append("마우스가 커서가 문장 위로 들어왔습니다.<br>");
  },
  mouseleave: function() {
    $(".someDiv").append("마우스가 커서가 문장을 빠져 나갔습니다.<br>");
  }
});

off() : 특정 요소의 이벤트와의 바인딩을 제거한다.

$("#btn").on("click", function() {
  alert("버튼을 클릭했습니다.");
});
$("#btnBind").on("click", function() {
  $("#btn").on("click").text("버튼 클릭 가능");
});
$("#btnUnbind").on("click", function() {
  $("#btn").off("click").text("버튼 클릭 불가능");
});

one() : 바인딩된 이벤트 핸들러가 한 번만 실행되고 나서는 더 이상 실행되지 못하게 한다.

• .one() 메서드는 .on() 메서드와 같은 인수를 전달받기 때문에 여러개의 이벤트 핸들러와 여러개의 이벤트를 가질수 있는 등 .on() 메서드와 같은 특징을 가집니다.

$("button").one("click", function() {
  $("div").append("더 이상 클릭이 불가능 합니다.");
});

---

오늘은 이렇게 jQquery 에서 사용되는 윈도우 이벤트 종류에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟