이벤트 전파와 버블링

HTML 문서의 이벤트 처리는 3단계를 거친다.

 

1단계는 문서 내의 요소에서 이벤트가 발생했을 때 HTML 문서의 밖에서부터 이벤트를 발생시킨 HTML 요소까지 포착해 들어가는 이벤트 포착 단계(CAPTURING_PHASE)이다.

 

2단계는 이벤트를 발생시킨 요소에 다다르면 요소의 이벤트에 연결된 함수를 직접 호출시키는 이벤트 발생(RAISING_PHASE: AT_TARGET) 단계이다.

 

마지막 3단계로는 이벤트가 발생한 요소로부터 상위 요소로 거슬러 올라가면서 동일한 이벤트를 호출시키는 버블링(BUBBLING_PHASE) 단계이다.

 

일반적으로는 2단계 RAISING, 3단계 BUBBLING_PHASE 에서 연결된 이벤트 함수가 호출된다. 이것을 그림으로 나타내면 아래와 같다.

이벤트 전파의 3단계

위 그림에서#outer 영역과#inner 영역의 요소에 각각 click 이벤트를 연결했을 때,#outer 영역을 클릭했을 때에는 해당 이벤트와 연결된 메소드가 실행되지만,#inner 부분에 해당하는 안쪽 영역을 클릭했을 때에는,#inner 영역의 클릭 시 연결된 이벤트가 발생될 것이라는 일반적인 기대와는 달리,#inner 와#outer 영역에 연결된 각각의 메소드가 모두 실행된다.

 

#inner 를 클릭(2 AT_TARGET)했을 때 상위 요소인 #outer 요소로 이벤트가 전파(3 BUBBLING)되기 때문이다. 이 때 이벤트 전파(Propagation)를 막기 위해서 이벤트 객체의 stopPropagation() 메서드를 호출해서 사용할 수 있다