Jquery API ".delegate() 메서드" 구현해 보기
Jquery API "delegate() 메서드" 구현해 보기
이번 포스트에서는 Jquery API 메서드인 .delegate() 메서드를 직업 구현(Jquery 소스 자체를 분석하여 구현하지는 않았다.)해 보았다.
.delegate() / .on() 메서드 예제 페이지:
.delegate()
http://api.jquery.com/delegate/
.on()
메서드(.delegate()) 기능으로는 생성된 엘리먼트(document.getElementById('delegate_container1'))에 click 이벤트를 바인딩 시키며, 그 자식 엘리먼트(document.getElementById('delegate_container1') > div) 중 세번째 argument로 할당된 태그(div) 엘리먼트를 감시 및 동일한 이벤트로 할당 시킨다. ("capture" 이벤트 동작 방식을 생각하면 이해가 빠르다.) 또한, 이 방식은 위와 같이 동적 요소(엘리먼트) 추가 시 유용하게 쓰일 수 있다.
또한, .on() 메서드 구현 중 특별히 알아둬야 할 부분이 있다면, .bind() 메서드의 세번째 argument인 callback 함수 호출 시 함수 내부에 "버블링 중지" 함수인 stopPropagation(e) 함수를 추가시키는 것이다.
즉, 이벤트 시 버블링이 발생하여, 이벤트가 발생된 엘리먼트와 같은 타입으로 할당된 모든 부모 엘리먼트들의 이벤트가 발생하여 의도 않은 결과가 나올 수 있다.(해당 엘리먼트의 부모 엘리먼트의 갯수가 둘이라면, 할당된 이벤트 또한 두 번 발생하게 된다.)
참고 사이트:
소스 전체 페이지
http://jsfiddle.net/mohwa/eRmmX/1/
소스 결과 페이지
http://mohwa.org/html/delegate.html
이벤트 버블링 or 캡춰
delegate로 이벤트 한방에 등록
