오늘 배운 것

이벤트 버블링(Event Bubbling)

이벤트 버블링은 한 요소에서 이벤트가 발생하면, 그 요소에 할당된 핸들러가 실행되고 이어서 부모 요소의 핸들러도 작동되는 것을 말한다. 버블링은 가장 최상단의 요소를 만날 때까지 반복된다.

버블링을 멈추기 위해서는 이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 된다.

예시

https://codepen.io/harrycod/pen/wvGNpdb

• 버블링(좌)
  • button element부터 가장 최상단에 있는 section element까지 물 속 거품(bubble)이 올라가듯 차례대로 핸들러가 작동된다.
• 버블링 중지(우)
  • event.stopPropagation()를 사용하면 해당 요소까지 이벤트가 실행되고 조상요소부터 버블링이 중지된다.
  • 예시처럼 중간에 event.stopPropagation()이벤트가 실행되면 그 요소보다 상위에 있는 요소들의 버블링 중단된다. 단 해당 요소까지의 핸들러는 모든 작동된다.

참고

• https://ko.javascript.info/bubbling-and-capturing