[Web] JavaScript - Event Bubbling

Event Bubbling

 

기본적으로 이벤트는 JavaScript에서 버블링됩니다. 이벤트 버블링은 target element에 이벤트가 발생했을 때, target에서 부터 상위의 Element까지 DOM 계층 구조를 순회하면서 이벤트 리스너를 찾아 실행하는 과정입니다. 이 동작은 일반적으로 Event Propagation 또는 Event Delegation이라고도합니다.

 

 

html 및 body와 같은 루트 레벨 요소에 이벤트 리스너를 추가 할 수도 있습니다. 이벤트는 아래의 순서로 버블링됩니다.

(클릭된 Target에서 Target을 감싸고 있는 최상위 Element 까지 )

 

Target -> Body -> HTML -> Document -> Window

 

 

 

Event Capturing

비슷하게 Capturing이라는 것도 있습니다. Bubbing과 반대 순서로 이벤트가 발생하는 것이지만,

기본적으로 버블링 순서로 이벤트가 발생합니다.

 

 

 

문법

Target.addEventListener(type, listener[, options]);

• type : 반응할 이벤트 유형(click, load 등)
• listener : 지정된 타입의 이벤트가 발생했을 때 알림을 받는 객체, function
• [options] : 이벤트 리스너에 대한 특성 지정, Event capturing 방식으로 지정할 경우 true

 

 

 

 

 

[참고 자료]

- https://dev.to/shimphillip/handing-javascript-events-efficiently-with-bubble-and-capture-4ha5