JavaScript - 이벤트 버블링(bubbling)과 캡처링(capturing)

이벤트 전파

이벤트가 발생했을 때, 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미

• 이벤트의 대상이 Window 객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않는다.

이벤트 전파 방식은 크게 버블링과 캡쳐링으로 구분된다.

* 버블링(bubbling) 전파 방식

이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식

• 해당 요소의 리스너가 실행된 후, 그 부모 요소에 등록된 리스너가 실행, 또다시 그 부모 요소에 등록된 리스너가 실행

• Document 객체뿐만 아니라 가장 마지막에는 Window 객체까지 계속 이어짐

• 장점 : 다수의 요소에 공통으로 적용되는 이벤트 리스너를 각각의 요소마다 따로 등록할 필요 없이 공통된 조상 요소에 한 번만 등록하여 처리가능

* 캡쳐링(capturing) 전파 방식

이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면 전파되는 방식

• 맨 먼저 Window 객체의 리스너가 실행된 후, Document 객체에 등록된 리스너가 실행되고, 또다시 그 자식 요소에 등록된 리스너가 실행

• 이벤트가 발생한 요소까지 이어짐

• 사용하려면 addEventListener() 메소드의 세 번째 인수에 true를 전달

이벤트 전파 막기

• 이벤트 전달 방식을 사용하지 않고 원하는 화면 요소의 이벤트만 신경 쓰고 싶다면 event.stopPropagation() 사용