이벤트 버블링 및 이벤트 캡처는 이벤트의 흐름에 대해 설명 할 때 자주 언급 되는 단어이다. 하지만, 이벤트 캡처의 경우 특별한 설정 없이는 잘 상용 되지 않는 흐름이다 보니 해당 내용은 잘 모를 수 있다. 이번 포스팅에서 이야기 하고자 하는 내용은, 아래의 옵션이다. 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의 이후에 호출 할 것인가? ...