이벤트 버블링과 캡처링

addEventListener() 웹API는 특정 이벤트 발생시, 동적 기능 추가하기 위해 사용되는 기본적 기능이다.

그런데, 웹브라우저는 어떻게 이벤트 발생을 감지하는지와 관련하여, 2가지 방식이 있다고한다.

1. Event Bubbling : 해당 화면 요소에 이벤트 발생시, 해당 이벤트가 더 상위의 화면 요소들로 계속 전달되는 것을 말한다. 모든 상위 요소에 addEventListener() API를 적용해보면 확인 가능하다.

2. Event Capture : 이벤트 버블링과 반대 방향(해당 이벤트가 하위의 화면 요소들로 계속 전파 되는 방식이다.
   신기한 점은 = addEventListener() API 옵션객체에 capture:true 를 설정하면, 이벤트 버블링과 반대방향으로 이벤트를 탐색 한다.

추가로, 이렇게 이벤트 전달이 일어나는게 싫고, 그냥 원하는 화면 요소의 이벤트만 신경쓰고 싶은 경우가 있을 수 있다. 마감에 대한 압박이 있는 경우가 많으니까 말이다. 이벤트가 전달되는 것을 막고 해당 화면 요소의 이벤트만 발생시키고 싶으면 stopPropagation() 웹 API를 사용해야 한다.

stopPropagation() API를 사용하면, 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위요소로 전달되지 않는다.
이벤트 캡처의 경우에는 클릭한 요소의 최상위 요소에 이벤트만 동작시키고 하위요소로 이벤트 전달은 안되게 한다.