jQuery 입문 | 이벤트 처리 | 이벤트의 위임 event.preventDefault()

이벤트의 위임(event delegation)

jQuery는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 상위 요소에 단 한번의 연결만으로도 동작할 수 있도록 해준다.

다음 예제는 다수의 <a> 요소에 클릭 이벤트 핸들러를 연결하고 있다.

$("#linkList a").on("click", function(event) {
  event.preventDefault();
  alert("이 링크는 동작하지 않습니다!");
});

<ul id="linkList">
  <li><a href="//www.devkuma.com">첫번째 링크</a></li>
  <li><a href="//www.devkuma.com">두번째 링크</a></li>
</ul>

코드 실행

이는 각 요소에 연결된 이벤트 핸들러는 화면에 현재 존재하는 <a>요소에는 연결되지만, 새롭게 추가되는 요소에는 연결되지 않는다.

위에 예제에서 신규 추가하는 버튼을 추가해 보자.

$("button").one("click", function() {
  $("#linkList").append('<li><a href="//www.devkuma.com">신규 링크</a></li>');
});

<button>신규 링크 추가</button>

코드 실행

이런 경우에 이벤트의 위임을 이용하면, 새롭게 추가된 <a>요소에도 연결할 수 있다.

$("#linkList").on("click", "a", function(event) {
  event.preventDefault();
  alert("이 링크는 동작하지 않습니다!");
});

코드 실행

.on() 메소드는 해당 요소에 첫 번째 인수로 전달받은 이벤트가 전파되었을 때, 그 이벤트를 발생한 요소가 두 번째 인수로 전달받은 선택자와 같은지 여부를 확인한다.
만약, 이벤트가 발생한 요소와 두 번째 인수로 전달받은 선택자가 같다면, 연결된 이벤트 핸들러를 실행한다.

이벤트의 위임을 이용하면 현재 존재하는 하위 요소뿐만 아니라, 새롭게 추가되는 하위 요소까지도 모두 자동으로 연결된다.

이벤트의 전파(event propagation)

이벤트의 전파란 이벤트가 발생했을 때, 브라우저가 이벤트 핸들러를 실행시킬 대상 요소를 결정하는 과정이다.
이벤트가 Document 객체나 HTML 문서의 요소에서 일어나면 대상 객체를 결정하기 위해 이벤트의 전파가 일어난다.
이렇게 이벤트가 전파되는 과정을 이벤트 버블링(event bubbling)이라고 한다.

이벤트 버블링은 이벤트가 발생한 요소부터 시작하여 DOM 트리를 따라 위쪽으로 올라가며 전파되는 과정을 의미한다.
즉, 이벤트가 발생한 요소에 연결된 이벤트 핸들러가 실행된 후, 그 부모 요소에 연결된 핸들러가 실행된다.
또다시 그 부모 요소에 등록된 핸들러가 실행되며, 마지막에는 Document 객체까지 계속 전파된다.

이러한 전파를 통해 위와 같은 **이벤트의 위임(event delegation)**이 가능해진다.

이벤트의 전파(propagation)에 대한 더 자세한 사항은 자바스크립트 이벤트 리스너 호출 수업에서 확인할 수 있다.