[jQuery] 이벤트 위임(Event Delegation)

 

이벤트 위임 (Event Delegation)

: 동적으로 생성되는 요소에 대해 이벤트 처리를 쉽게 할 수 있는 방법. 대상 요소에 대해 일일이 이벤트 바인딩을 하지 않아도 되므로 코드의 성능도 개선되고 처리 속도가 빨라진다. 

 

치킨먹고싶다

뿌링클

황금올리브

허니콤보

맵슐랭

어떤 치킨 ???

 

1. 제목 클릭 시 메뉴 옆에 새 메뉴 추가

2. 기존 메뉴 클릭 시 밑에 표시됨

>> 추가한 메뉴는 클릭해도 표시되지 않는 문제 발생!

 

 

// 기존 코드
$('h5').on("click", function(){
    $('#result22').text(this.innerText);
});

모든 'h5' 요소에 대해 click 이벤트를 바인딩한다. 하지만 이벤트 바인딩이 발생한 시점에서 이미 생성된 요소만 바인딩된다. 즉, 나중에 추가된 요소에 대해서는 이벤트가 동작하지 않는다. 

 

>> 해결

// on( 이벤트명, 자식, 함수명 )
$('#chicken').on("click", 'h5', function(){
    $('#result22').text(this.innerHTML);
});

부모 요소에 대해 click 이벤트를 바인딩한다. 이벤트 핸들러 함수 내부에서는 h5 요소를 대상으로 하여 이벤트를 처리한다. 이렇게 함으로써 나중에 추가된 요소에 대해서도 이벤트가 동작하게 된다.

 

 

+ 부모를 동적으로 생성하는 것은 이벤트 발생이 안됨