[JavaScript] addEventListener() 메소드의 parameters

addEventListener 메소드를 사용할 때, 세번째 parameter는 입력하지 않아도 되는 optional parameter이다.

 

이 parameter는 boolean값을 입력해 줄 수 있는데, 이벤트가 버블링 또는 캡쳐링이 되도록 결정해준다.
따라서 캡쳐링을 허용할 것이면 true, 버블링을 허용할 것이면 false를 값으로 넣어주면 된다.
default value는 false이므로 아무것도 입력하지 않고 둔다면 이벤트의 버블링이 일어나게 된다.

• 버블링(Bubbling)
  여러 element들이 중첩되어 있을 때, 클릭 등의 이벤트가 발생하면 현재 이벤트를 발생시킨 요소부터 그 부모 요소로 이벤트가 전파되어 나가는 현상. (거품처럼 올라간다고 해서 버블링인듯)
  버블링을 막고 싶다면 e.stopPropagation()을 통해 끊을 수 있다
• 캡쳐링(Capturing)
  여러 element들이 중첩되어 있을 때, 클릭 등의 이벤트가 발생하면 현재 이벤트를 발생시킨 요소의 가장 최상위 조상부터 이벤트가 발생되면서 현재 이벤트가 발생한 요소까지 이벤트가 내려오며 전파되는 현상
  버블링 과정의 반대 순서로 진행된다고 생각하면 될 것 같다

 

맨 위의 예시 이미지에서는 false를 입력해 주었으므로, 이벤트의 버블링이 일어날 것이다.

 

참고 : https://www.w3schools.com/jsref/met_document_addeventlistener.asp