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);
});