[TIL] addEventListener() 3번째 파라미터 (feat. event capturing, event bubbling)

🤔 addEventListener() 3번째 파라미터에 대해 정리한 글입니다.

addEventListener의 3번째 파라미터 : false or true(useCapture)
addEventListener의 3번째 파라미터는 이벤트 버블링과 캡쳐링에 대한 컨트롤을 하는 boolean 타입의 optional 파라미터이다.
default는 false이다.

핵심 개념

• 이벤트 버블링
  - 3번째 파라미터가 false일 경우, 이벤트 버블링 속성으로 지정한다.

  • 클릭과 같은 이벤트가 발생했을 때, 해당 이벤트가 발생된 요소에서 부모 요소로 이벤트가 전파된다.
  • e.stopProPagation()으로 버블링을 막을 수 있다.

• 이벤트 캡쳐링
  - 3번째 파라미터가 true일 경우, 이벤트 캡쳐링 속성으로 지정한다.

  • 이벤트 리스너가 부모 요소에서 시작되어 해당 이벤트가 트리거된 요소까지 내려간다.

    ```javascript
    document.addEventListener('focus', function (event) {
    	console.log('something came into focus: ' + event.target);
    }, true);	
    ```

  참고
  Go Make Tings