[JavaScript] 이벤트 버블링&캡처링

버블링과 캡처링

이벤트 버블링

이벤트가 하위 요소에서 상위 요소로 전파

버블링은 타깃 이벤트에서 시작해 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 이러한 버블링은 event.stopPropagation()를 사용해 중단할 수 있다. 하지만 버블링은 유용하기 때문에 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 않는게 좋다.

이벤트 캡처링

이벤트가 상위 요소에서 하위 요소로 전파

elem.addEventListener(..., true)

addEventListener의 capture 옵션을 true로 설정하면 캡처링 단계에서 이벤트를 잡아낼 수 있다.
캡처링 단계는 거의 쓰이지 않고, 주로 버블링 단계의 이벤트만 다뤄진다.

References

• https://ko.javascript.info/bubbling-and-capturing
• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-4/event-bubbling.md#%ED%83%80%EA%B9%83-%EB%8B%A8%EA%B3%84