jquery_event_handling

이벤트 캡처링과 버블링

DOM 요소가 겹쳐있는 상황에서 가장 하위 요소에 이벤트가 발생하면 해당 요소까지 이벤트가 전달되고 다시 상위로 전달된다. 이 상황에서 하위 요소로 이벤트를 전달하는 것을 캡처링이라고 하고, 이벤트가 하위 요소에서 상위 요소로 거슬러 올라가는 것을 버블링이라고 한다.

이벤트 캡처링 동작에서 이벤트 전달 차단
이벤트 캡처링으로 이벤트를 등록하여 상위 이벤트에서 이벤트를 처리하고 하위 요소에 이벤트 전달을 차단할 수 있다.
예제: 이벤트 캡처링을 사용하여 이벤트 전달 차단

활용

다수의 DOM에 한꺼번에 이벤트 리스너를 할당해야 할 때
동적인 DOM에 이벤트리스너를 그때그때 할당해야 할 때

예를 들어, 10000개의 Cell에 이벤트를 할당해야 하는 경우, 초기화 단계에서 이벤트리스너를 할당하느라 멈칫거리게 되어 사용자 경험이 나빠질 수 있다. 따라서 초기화 단계에서 많은 이벤트 리스너를 할당하기보다는 간단하게 하나의 부모 DOM에 이벤트리스너를 할당하여 관리하는 방법이 있다. 이것이 바로 이벤트 델리게이션 디자인 패턴이다.

이벤트 캡처링이나 버블링을 해야해서 <body>처럼 아주 상위의 DOM에 이벤트를 걸게 되면 각각의 모든 이벤트를 처리하는 데 필요한 자원이 직접 HTML DOM마다 이벤트를 거는 것보다 많을 수 있다. 따라서 이러한 초기화 단계에서의 사용자 경험과 이벤트가 발생하고 나서의 사용자 경험의 차이를 잘 고려하여 적당한 선의 wrapper를 결정해서 이벤트 델리게이션 패턴을 사용하는 것이 좋다.

참고: 이벤트 델리게이션 패턴

jQuery 이벤트에 동작방식

jQuery는 이벤트 캡쳐링을 지원하지 않고, 이벤트 버블링 방식을 사용한다.
중첩된 요소에 이벤트를 등록해도 하위 요소까지 이벤트가 전달된 다음 상위 이벤트로 전달하면서(버블링) 등록된 콜백을 호출하는 구조다.
따라서 이벤트 캡쳐링 방식으로 이벤트를 처리해야 하는 경우, DOM API를 사용해서 이벤트를 등록해야 한다.

Event capturing jQuery

//Use event capturing instead:
$("body").get(0).addEventListener("click", function(){}, true);

// For cross browser implementation.
var bodyEle = $("body").get(0);
if(bodyEle.addEventListener){
   bodyEle.addEventListener("click", function(){}, true);
}else if(bodyEle.attachEvent){
   document.attachEvent("onclick", function(){
       var event = window.event;
   });
}

참고: Event capturing jQuery

jquery_event_handling

이벤트 캡처링과 버블링

jQuery 이벤트에 동작방식

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally