이벤트 버블링 VS 이벤트 캡처 (이벤트 흐름)

  이벤트 버블링 및 이벤트 캡처는 이벤트의 흐름에 대해 설명 할 때 자주 언급 되는 단어이다. 하지만, 이벤트 캡처의 경우 특별한 설정 없이는 잘 상용 되지 않는 흐름이다 보니 해당 내용은 잘 모를 수 있다.

 이번 포스팅에서 이야기 하고자 하는 내용은, 아래의 옵션이다.

 addEventListener(type, listener, useCapture) 이벤트 리스터를 등록 할 때 useCapture인자를 줄 수 있는데, 이건 과연 뭘까? 간단하게 알아보자.

 이벤트

 이벤트는 무엇일까? 간단하게 말하면 javascript와 html간에 상호작용을 말할 수 있다. 가장 간단한 예로는 click이벤트가 있을 것이다. html에서 click이 발생 했을때, javascript의 리스너를 통하여 어떤 행위를 하는 것. 뭐 물론 script에서도 event를 발생 시킬 수 있다. 

 이벤트의 흐름

 이벤트의 흐름이라고 하면 이벤트가 발생 되는 순서라고 인지 하면 된다. 기본적으로 window객체에서 이벤트를 발생(트리거) 시켜야 한다. 자 여기서 생각을 해볼 만한 것이 있다. 과연 당신이 이벤트의 흐름을 개발해야 한다고 생각해보자. 이벤트의 시작은 window여야 한다. window에는 document(dom)을 갖고 있다.

 간단하게 위와 같은 dom트리에서 DIV를 click하였다고 생각해보자.

 그러면 DIV를 window에서 추적을 해보자.

 window => document => html => body => div 이렇게 도달하게 된다. 자 그렇게 하고 나서 당신은 div에 연결되어있는 click 리스너를 실행 시켜줄 것이다.

 그렇다면 body에도 click리스너가 등록 되어있다면 어떻게 할 것인가? div에 click리스너보다 body의 click리스너를 먼저 호출 할 것인가? div의 이후에 호출 할 것인가?

 이벤트 버블링

 이벤트 버블링은 이벤트의 가장 깊은 요소에서 위로 발생하는 방식을 사용한다. 

 위에 이벤트 흐름에서 설명 한대로 코드를 작성하여 작성해본 코드이다. 

 div#child를 클릭한 경우 이벤트의 순서가.

 div#child => body#parent 순서로 발생 함을 알 수 있다. 즉 이벤트 발생지(깊은 곳)에서 부터 위로 발생한다.

 이벤트 캡처

 이벤트 캡처 방식은 최상위 요소에서 대상 순서로 발생한다고 보면 된다.

 이번에는 document에도 이벤트를 추가하여 보기 편하게 만들어 봤다.

 자세히 볼 부분은 child와 parent의 이벤트 발생 순서가 달라짐을 확인해보면 좋을 것 같다.

 이벤트 흐름 요약

 주의 점으로는 이벤트 버블링 같은 경우에는 Event.stopPropagation() 으로 중간에 멈출수 있지만, 이벤트 캡처는 중간에 멈출수 없다.