이벤트 버블링과 캡쳐링

yujuck·2020년 8월 23일
4
post-thumbnail

웹페이지를 만들다보면 제일 중요한 것 중 하나가 바로 이벤트라고 할 수 있다. 이벤트를 등록해서 기능들을 구현하는데, 이벤트가 전달되는 방식에는 버블링과 캡쳐링 방식이 있다.

이벤트 버블링(Event Bubbling)

이벤트 버블링이란 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 요소로 전달되어가는 것을 말한다.

예를 들어보자!

<body>
  <div class="first">
      <div class="second">
              <div class="third">
              </div>
      </div>
  </div>
</body>        

만약 여기서 class이름이 third인 div에서 이벤트가 발생한다면 상위 요소인 second, firts에 이벤트가 전달되는 것이 이벤트 버블링이다.
한 요소에 이벤트가 발생하면 이 요소에 등록되어있던 이벤트 핸들러가 동작하고, 이어서 바로 위의 부모 요소부터 최상단까지 계속 전달되고, document 객체를 만날 때까지 이벤트 핸들러가 동작한다.

거의 모든 이벤트가 버블링 된다고 한다. focus같은 이벤트는 버블링이 안된다고 함!

이벤트 캡쳐링 (Event Capturing)

이벤트 캡쳐링은 버블링과 반대로 상위 요소에서 하위 요소로 이벤트가 전달되는 것을 말한다.
위의 예로 보면 버블링은 third -> second -> first 로 전달되었다면,
캡쳐링은 반대로 first -> second -> third로 전달이 된다.
이렇게 하위 요소로 이벤트가 전달되는 것을 허용하기 위해서는 이벤트 등록시 capture: true를 적용해야한다.

document.querySelector('.first').addEventListener('click', function(){}, true)

// or
document.querySelector('.first').addEventListener('click', function(){}, {capture: true})

default로 capture는 false이기 때문에 3번째 인자로 true를 넣어주면 캡쳐링이 적용된다.

capture 옵션은 두 가지 값을 가질 수 있다.
false이면(default 값) 핸들러는 버블링 단계에서 동작하고,
true이면 핸들러는 캡처링 단계에서 동작한다.

이벤트 버블링과 캡쳐링은 이벤트 위임을 이해하기 위한 기본 개념이라고 할 수 있다는데.. 다음엔 이벤트 위임에 대해 알아보기로!

0개의 댓글