[JavaScript] 이벤트 버블링(Event Bubbling) / 이벤트 캡쳐링(Event Capturing)

출처 : 짐코딩

 

 

 

이벤트 버블링(Event bubbling)

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 위 그림에서 보면 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가서 window까지 이벤트를 전파하는 것이다. 마치 거품처럼!

 

 

span 태그를 누르면 span -> p -> div -> main -> body 가 차례대로 콘솔에 찍힌다.

 

 

버블링을 마주하고 싶지 않다면?!

버블링을 강제로 중단시키는 방법도 존재한다. 이벤트 객체의 메서드인 event.stopPropagation()을 사용하면 된다.

하지만 꼭 필요한 경우를 제외하고는 버블링을 막아선 안된다. 아키텍처를 잘 고려해서 진짜 막아야 하는 상황에서만 버블링을 막아야 한다. 

 

 

---

 

 

 

이벤트 캡처링(Event Capturing)

캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려간다. window부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 캡처링 단계를 이용해야 하는 경우는 흔하지 않아서, 캡처링에 관한 코드를 발견하는 일은 거의 없다. 

 

 

 

addEventListener 의 옵션 객체에 { capture: true } 또는 true 를 설정해주면 캡처링을 구현할 수 있다.

 

 

 

 

---