이벤트 버블링, 캡쳐, 위임

자바스크립트는 웹 API를 통해 사용자의 입력 (클릭, 커서 이동, 키 입력 등) 에 따른 추가 동작을 구현한다.

그리고 브라우저는 버블링과 캡쳐링을 통해 이벤트를 감지한다.

 

---

이벤트 버블링

이벤트 버블링은 하위에서 상위 요소로 이벤트를 전달하는 특성이다.

버블링은 기본적으로 최상위 태그인 body까지 이벤트를 전달한다.

 

  <div class="a">
    a
    <div class="b">
      b
      <div class="c">
        c
        <div class="d">
          d
        </div>
      </div>
    </div>
  </div>
  <script>
    const a = document.querySelector('.a');
    a.addEventListener('click', () => alert('a'));
  </script>

위의 이미지와 같은 a > b > c > d 형태의 구조로 코드를 작성했다.

이후 a를 대상으로 클릭 이벤트를 생성하면 b나 c, d의 영역을 클릭해도 해당 이벤트가 발생한다.

이는 d에서 이벤트가 발생했을 때, 최상위에 있는 요소까지 이벤트를 전파하기 때문이며, 이를 이벤트 버블링이라 한다.

 

버블링을 막는 방법으로는 stopPropagation() 과 상위 태그의 이벤트에서 bubbles 프로퍼티를 검사하는 방법이 있다.

const a = document.querySelector('.a');
const d = document.querySelector('.d');

// stopPropagation
a.addEventListener('click', e => {
  alert('a'));
}
d.addEventListener('click', e => {
  e.stopPropagation();
}

// bubbles
a.addEventListener('click', e => {
  if(e.bubbles) return;
  alert('a');
});
d.addEventListener('click', e => {
});

 

---

이벤트 캡쳐

이벤트 캡쳐는 버블링과는 반대로 하위 요소로 이벤트를 전달하는 특성이다.

버블링과 마찬가지로 최상위 태그인 body부터 해당 태그를 찾아가게 된다.

 

const div = document.querySelectorAll('div');
div.forEach(v => v.addEventListener('click', e => {
  alert(e.currentTarget.className);
}, { capture : true }));

html의 구조는 버블링과 동일하다.

캡쳐는 버블링과 다르게 addEventListener에 추가적인 설정이 필요하다.

세 번째 인자인 options에 capture : true 를 설정하면 된다.

 

위의 코드에서 a, b, c, d 모든 태그에 이벤트를 생성했으며, 이제 d를 클릭하게 되면 상위 태그인 a부터 이벤트가 발생하게 된다.

 

버블링으로 구현했다면 d, c, b, a 순으로 alert가 발생하겠지만

캡처로 구현했으므로 a, b, c, d의 순서로 alert가 발생한다.

 

 

---

이벤트 위임

ul 태그가 있고 하위의 li태그는 클릭 시 textContent를 console에 출력한다고 할 때,

li태그에 이벤트를 추가한다면, 새로운 li태그가 추가됐을 때, 새로운 태그에 또 이벤트를 생성해야하므로 번거로우며, 불필요한 메모리 사용이 발생한다.

하지만 ul 태그 하나에 이벤트를 추가한다면, 버블링의 특성을 통해 하위 요소인 li의 변화와 상관없이 공통적인 이벤트를 관리할 수 있게 된다.

 

// 일반
const li = document.querySelectorAll('li');
li.forEach(v => v.addEventListener('click', e => console.log(e.target.textContent)));

// li가 추가된다면?
const newLi = li[li.length - 1];
newLi.addEventListener('click', e => console.log(e.target.textContent));



// 위임
const ul = document.querySelector('ul');
ul.addEventListener('click', e => {
  if(e.target.tagName === 'LI')
  console.log(e.target.textContent);
});

// li가 추가돼도 상관없음!

 

 

출처

https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles