이벤트의 위임
이벤트의 위임(event delegation)
제이쿼리는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 조상 요소에 단 한 번만 연결하면 동작할 수 있도록 해줍니다.
다음 예제는 <ul>요소의 자식 요소 중 <a>요소에 대해 요소마다 각각 이벤트 핸들러를 직접 연결하는 예제입니다.
예제
$(function() {
$("ul a").on("click", function(event) { // <ul>요소의 자식 요소 중 <a>요소를 클릭했을 때,
event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
$("#text").append("이 링크는 동작하지 않습니다!<br>");
});
});
요소마다 직접 등록된 이벤트 핸들러는 현재 존재하는 <a>요소에만 연결되며, 새롭게 추가되는 요소에는 연결되지 않습니다.
예제
$(function() {
$("ul a").on("click", function(event) { // <ul>요소의 자식 요소 중 모든 <a>요소를 클릭했을 때,
event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
$("#text").append("이 링크는 동작하지 않습니다!<br>");
});
$("button").one("click", function() {
$("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
});
});
하지만 위의 예제에 이벤트의 위임을 이용하면, 다음과 같이 작성할 수 있습니다.
예제
$(function() {
$("ul").on("click", "a", function(event) {
event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
$("#text").append("이 링크는 동작하지 않습니다!<br>");
});
$("button").one("click", function() {
$("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
});
});
.on() 메소드는 해당 요소에 첫 번째 인수로 전달받은 이벤트가 전파되었을 때, 그 이벤트를 발생한 요소가 두 번째 인수로 전달받은 선택자와 같은지를 검사합니다.
만약 이벤트가 발생한 요소와 두 번째 인수로 전달받은 선택자가 같으면, 연결된 이벤트 핸들러를 실행합니다.
이벤트의 전파(event propagation)
이벤트의 전파란 이벤트가 발생했을 때, 브라우저가 이벤트 핸들러를 실행시킬 대상 요소를 결정하는 과정입니다.
이벤트가 Document 객체나 HTML 문서의 요소에서 일어나면 대상 객체를 결정하기 위해 이벤트의 전파가 일어납니다.
이렇게 이벤트가 전파되는 과정을 이벤트 버블링(event bubbling)이라고 합니다.
이벤트 버블링은 이벤트가 발생한 요소부터 시작하여 DOM 트리를 따라 위쪽으로 올라가며 전파되는 과정을 의미합니다.
즉, 이벤트가 발생한 요소에 연결된 이벤트 핸들러가 실행된 후, 그 부모 요소에 연결된 핸들러가 실행됩니다.
또다시 그 부모 요소에 등록된 핸들러가 실행되며, 마지막에는 Document 객체까지 계속 전파됩니다.
이러한 전파를 통해 위와 같은 이벤트의 위임(event delegation)이 가능해집니다.
이벤트의 전파(propagation)에 대한 더 자세한 사항은 자바스크립트 이벤트 리스너 호출 수업에서 확인할 수 있습니다.
