delegation

1. delegation 이란?

특정 element 에서 event가 발생하면, 해당 event 는 모든 상위 element로 전달되며(bubbling phase), 각 element 에 등록된 모든 event handler 가 호출된다.

이때 상위 element에서는 하위 element 들을 대표 (delegation)해서 event handler 를 등록할 수 있다. 

예를 들어, 아래 구조에서 

<div id="tour>

 <button></button>

 <ul class="photos"></ul>

</div>

아래와 같이 event handler를 설정한다면, 

$("#tour").on("click", "button", function() {...});

#tour 의 하위 element 중 button element 에 대해서만 event handler 를 등록한다는 의미이다.

.on( events [, selector ] , handler ) 로 등록을 하며, element 일때는 "element명", id 일때는 "#id명", class명일때는 ".class명" 으로 설정한다.

2. 왜 사용하는가?

1) 동일 element 유형들에 대해 같은 event handler 를 등록해야 할 때

ex) <div id="tour"></div> 아래 <button></button> 이 100개 있다고 하면, 100개의 event handler를 등록해야 한다. 성능에 악 영향을 주고, 소스도 길어진다.

2) call back 함수, timer에 의해 element 가 생길 경우

call back 함수 실행 후 또는 특정 시간 후 element 가 생기기 때문에 element 생기기 전 직접 event handler를 등록할 수 없다. delegation 의 경우 상위 element 에 event handler를 등록하기 때문에, delegation 을 통해서라면 가능하다.