[jQuery] 이벤트의 위임

이벤트 위임

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

다음 예제는 <ul> 요소의 자식 요소 중 <a>요소에 대해 요소마다 각각 이벤트 핸들러를 직접 연결하는 예제입니다.
요소마다 직접 등록된 이벤트 핸들러는 현재 존재하는 <a>요소에만 연결되며, 새롭게 추가되는 요소에는 연결되지 않습니다.

$("ul a").on("click", function(event) {
  event.preventDefault();
  $("#text").append("이 링크는 동작하지 않습니다!<br>");
});
$("button").one("click", function() {
  $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>')
})

하지만 위의 예제에 이벤트 위임을 이용하면, 다음과 같이 작성할 수 있습니다.

$("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() 메소드는 해당 요소에 첫 번째 인수로 전달받은 이벤트가 전파되었을 때, 그 이벤트를 발생한 요소가 두 번째 인수로 전달받은 선택자와 같은지를 검사합니다.
만약 이벤트가 발생한 요소와 두 번째 인수로 전달받은 선택자가 같으면, 연결된 이벤트 핸들러를 실행합니다.