[JavaScript] 이벤트 전파 bubbling, capturing

이벤트 객체

우리가 자바스크립트에서 동적인 기능을 위해 이벤트를 등록하고자 할 때는 여러 방법이 있지만,
흔히들 addEventListener()과 같은 메서드를 사용하곤 한다.
브라우저는 이벤트가 발생하면 결과적으로 아래와 같은 이벤트 객체 event object를 만든다.

클릭 이벤트가 발생했을 때의 객체 내부. (길어서 일부만 캡쳐)

브라우저는 이벤트를 어떻게 감지해서 객체를 만들어 낼 수 있는 것일까?

이런 궁금증을 해결해주는 이벤트를 감지 하는 특성이 있다.

바로 이벤트 버블링과 이벤트 캡쳐링, 두 가지 방식이다.

 

 

이벤트 버블링 Event Bubbling

이벤트 버블링은 비누방울이 아래에서 올라오는 것과 비슷하게 생각하면 좀 더 수월한 이해가 가능하다.

이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되는 특성을 말한다.

Article부터 Button까지 중첩되어있는 요소가 있고 각 요소별로 로그를 출력하는 클릭 이벤트를 갖고 있다고 하자.

 

단지 버튼을 눌렀을 뿐인데 가장 상위 요소인 article까지 순차적으로 이벤트가 모두 진행되는 것을 볼 수 있다.

브라우저는 특정 요소에서 이벤트가 발생했을 때 최상위의 요소까지 이벤트를 전파시키는 특징을 가지고 있다.

위와 같이 하위에서 상위 요소로 이벤트가 전파되는 방식을 이벤트 버블링이라고 한다.

이벤트 버블링은 stopProagation() 이라는 메서드로 중지시킬 수 있다.

division.addEventListener('click', () => {
  event.stopPropagation(); // 이벤트 버블링을 중지시킴
  console.log('division');
});

 

 

 

이벤트 캡쳐링 Event Capturing

이벤트 캡쳐링은 이벤트 버블링과 반대로 상위에서 하위요소로 이벤트가 전파되는 방식이다.

최상위 요소에서 이벤트가 발생한 하위 요소로 내려가는 것이다.

아까와 반대로 article 부터 로그가 찍힌다.

똑같이 button을 눌렀음에도 article부터 button으로 이벤트가 전파되는 것이다.

 

 

이벤트 캡쳐링은 addEventListener() 메서드에서 useCapture 라는 옵션을 설정하여 동작시킬 수 있다.

기본값은 false인데, true로 설정되어 있을 경우 해당 요소의 이벤트가 먼저 발동된다.
아래와 같이 true로만 작성해줄 수도 있고,

article.addEventListener(
  'click',
  () => {
    console.log('article');
  },
  true
);

 

 

다음과 같이 객체의 옵션을 지정해서 사용할 수도 있다. {capture: true}를 축약한 것이 위의 true다.

container.addEventListener(
  'click',
  (event) => {
    event.target.style.background = 'blue';
  },
  {
    capture: true
  }
);

 

이런 이벤트 전파 방식으로 이벤트를 위임하게 되는데, 그 부분에 대해서는 추후 추가하도록 하겠다. 😇

 

 

추가로 이벤트 전파 방식을 재밌게 파악할 수 있는 사이트를 알게되어 소개한다.

https://domevents.dev/

Explore DOM Events