[JS] 이벤트 버블링(bubbling)과 이벤트 캡처링(capturing)

이벤트 버블링과 이벤트 캡처링이란?

이 글은 이벤트 JS에서 이벤트 버블링과 이벤트 캡처링에 대해 설명한다.

이벤트 버블링과 캡처링 모두 계층적으로 짜여있는 HTML 요소에 이벤트가 발생할 때 나타나는 연쇄반응을 칭한다. 해당 반응이 발생하는 방향에 따라 버블링과 캡처링으로 나뉜다.

말로보면 어려우니 아래 그림과 코드를 통해 알아보자 

이벤트 버블링

이벤트 버블링

아래와 같은 코드가 있다고 가정해보자

<form onclick="alert('form')">
  <div onclick="alert('div')">
    <p onclick="alert('p')">클릭해!</p>
  </div>
</form>

브라우저는 이벤트가 발생하면 그 이벤트를 최상위에 있는 요소까지 이벤트를 전파시키는 특성이있다.
해당 코드에서 p 태그인 "클릭해!"를 누르게 되면 처음으로 알럿 창인 "p"가 뜨게 된다 이후 "div"와 "form"이 순차적으로 출력되며 총 3개의 알럿 창이 뜨게 된다. p태그만 클릭하였지만 div와 form요소까지 클릭된 것과같은 효과를 보는것이다. 이러한 현상처럼 하위에서 상위 요소로 이벤트가 전파되는 방식을 이벤트 버블링이라한다. ( 물속의 거품과 같다해서 이벤트 버블링이라 부른다 ) 

=> focus와 같은 이벤트의 경우 버블링이 되지 않는다. 이와 같은 예외처럼 '거의' 모든 이벤트는 버블링 되지만 예외도 존재한다.

이벤트 캡처링

이벤트 캡처링

이벤트 캡처링이란 이벤트 버블링의 반대방향으로 전파되는 것이다.
위의 사진과 같이 위에서부터 타고내려오는 형식으로 특정 이벤트가 발생하면 최상위 요소부터 최하위 요소까지 해당 태그를 찾아 내려간다. ( 실제 코드에서는 자주 쓰이지 않는다 )

addEventListener의 매개변수에는 bool타입으로 true와 false를 넣을 수 있다.
true를 넣을 시 이벤트 캡처링으로 전파되는 이벤트를 캐치하고 false일시 버블링으로 전파되는 걸 캐치한다.

// true 값을 작성시 캡처링 false 일시 버블링 적용 ( default : false )
element.addEventListener(..., true)
element.addEventListener(..., false)

이벤트 위임

이벤트 위임이란 동적으로 노드를 생성하고 삭제할 때 하위 요소마다 이벤트를 붙이지 않고 상위요소에서 하위 요소의 이벤트를 제어하는 방식이다.