버블링(Bubbling)과 캡쳐링(Capturing)

버블링과 캡쳐링, 이벤트 전파?

중첩된 요소에서 이벤트가 발생할 때, HTML DOM API 의 이벤트 전파(Event Propagation) 순서 차이

 

1) 버블링 : 이벤트 발생 요소 -> 부모

2) 캡쳐링 : 부모 -> 이벤트 발생 요소

 

 

ex)

FORM > DIV > P 순의 중첩된 형태일 때, P 태그 선택 시

• 버블링 : P -> DIV -> FORM -> ... -> DOCUMENT 순으로 각 객체의 이벤트 핸들러 동작
• 캡쳐링 : 위와 반대

 

- 캡쳐링은 거의 사용하지 않는다. 

- 사용하고 싶다면 addEventListener 의 3번째 인자인 useCapture 를 true로 설정해주면 된다.

 

참고 :

ko.javascript.info/bubbling-and-capturing