이벤트 전파

이벤트 전파

이벤트 객체가 생성되면, 이벤트를 발생시킨 타킷 요소(DOM 요소)를 중심으로
DOM 트리를 통해 이벤트 전파가 발생한다.

---

이벤트 전파 방향 구분

DOM 트리의 계층적인 구조에 의해, 이벤트 전파는 부모-자식 사이에서 발생한다.

이벤트 버블링

• 자식(타깃) 요소에서 발생한 이벤트가 부모 요소로 전파하는 방식

이벤트 캡처링

• 부모 요소부터 시작하여 이벤트가 발생한 자식(타깃) 요소로 전파하는 방식

---

이벤트 전파 막기

• 이벤트 버블링과 캡처링을 막기위한 방식으로 e.stopPropagation()를 이용한다.

• e.stopPropagation()는 웹 API로 해당 요소 이외에 이벤트를 전달하는 것을 막는다.

• 버블링의 경우, 클릭한 요소의 이벤트만 발생시킨다.
• 캡처링의 경우, 클릭한 요소의 최상위 요소의 이벤트만 동작시킨다.

  function eventFunc(e) {
    e.stopPropagation();
  }
  

이외에도, e.stopImmediatePropagation()나 e.preventDefault()의 방법도 존재한다.

---

이벤트 위임

• 동일한 이벤트를 여러 요소에 달아주는것은 코드 낭비가 될 우려가 있다.

• 따라서, 공통된 부모 요소에 이벤트를 등록하여,
  자식 요소에 이벤트를 발생시켜 부모로 전파하도록 한다. (이벤트 버블링)

• 예시로, 다음과 같은 DOM 구조가 있다.

  <ul id="parent">
    <li id="e1">1번</li>
    <li id="e2">2번</li>
    <li id="e3">3번</li>
    <li id="e4">4번</li>
    <li id="e5">5번</li>
  </ul>
  

  1. 모든 자식 요소에 이벤트를 등록하는 것은 번거롭다.

       let items = document.querySelectorAll('li');
       items.forEach((v) => {
        v.addEventListener('click', () => {
            alert('클릭');
        });
       });
     

  2. 부모 요소에 이벤트를 등록시켜, 이벤트 위임을 활용한다.

       let itemList = document.getElementById('parent');
       itemList.addEventListener('click', (e) => {
        if (e.target.tagName === 'LI') alert('클릭');
       });
     

---

✨ 출처

blog, 프론트엔드 면접 문제 은행
한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)

---