jQuery 이벤트 핸들링


jQuery Event 처리

on() 메서드를 통해 모든 이벤트를 처리할 수 있다. .click() 같은 이벤트 핸들러 메서드는 사용을 자제해야 한다.

// 이벤트 등록하기
$("#btn").on("click", function(e) {
  var eventType = e.type;
  // code...
});

// 이벤트 핸들러 추가 옵션
$("ul").on(
  "click focus mouseenter", // 대응할 이벤트들을 나열
  "li",		// 자손요소들을 필터링
  {status: "중요"},	// 함수에 추가 정보를 전달
  function (e) {	// 요소들을 대상으로 실행될 함수
    e.target.textContent;
    e.data.status; // 전달받은 추가 정보
    e.type;
    // code...
  }
);

/* event 객체
 * which : 눌려진 버튼이나 키
 * data : 함수에 전달된 추가 정보들을 가지고 있는 객체 표현식
*/

// 이벤트 한번만 실행
.one("click", function() {...});

// 특정 이벤트의 특정 이벤트리스너 제거
.off("click", eventListener)
// 특정 이벤트의 모든 이벤트리스너 제거
.off("click")
// 특정 대상의 모든 이벤트리스너 제거
$("#btn").off()

// 특정노드(btnB)의 이벤트(click)를 수동으로 발생시키기
$("#btnA").click(function() {
  $("#btnB").trigger("click");
});

// 사용자 정의 이벤트
var eve= jQuery.Event("eventName");
eve.data1 = value;
eve.data2 = value;
$target.trigger(eve);
// 사용
on.("eventName", function(e) {
  e.data1;
})

/* 예시 */
// ul.menu 태그의 자손 li태그를 동적으로 이벤트 핸들링하기
$("ul.menu").on("click", "li", function (event) {
    $(event.target).html();
    $(this).html();
    event.stopPropagation();
});

// 키보드 키의 ASCII 코드 확인하기
$(document).keydown(function(e) {
    console.log(e.keyCode);
});
SHARE