📄 예시 코드#

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

p 태그를 클릭하면 다음과 같은 순서로 핸들러가 실행됩니다:

• p → div → form → document …

버블링은 마치 깊은 곳에서 버블이 올라오듯, 안쪽 요소에서 바깥쪽으로 이벤트가 전파되는 구조입니다.

CAUTION

거의 모든 이벤트는 버블링된다. focus 이벤트는 아니긴 하지만… 대부분 버블링된다.

event.target와 this(=event.currentTarget)의 차이점#

어떤 차이가 있나면 전자는 실제 이벤트가 시작된 타깃 요소이다. 버블링이 진행되어도 여기서 시작되었다는 것은 변하지 않는다.
반면에, this는 현재 요소로 현재 실행 중인 핸들러가 할당된 요소를 참조한다.

<form onclick="alert('form')">FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

form에만 이벤트 핸들러가 있어도, 자식인 div나 p를 클릭하면 이벤트가 버블링되어 form의 핸들러가 실행됩니다.
이때 event.target은 실제로 클릭한 요소(div나 p)이고, this는 핸들러가 연결된 요소인 form을 가리킵니다.

1. 논리적 이유#

자식 요소는 부모 요소의 영역 안에 포함되어 있기 때문에, 자식을 클릭하는 행위는 곧 부모를 클릭하는 행위로도 해석할 수 있습니다.
따라서 자식 요소에서 발생한 이벤트가 부모에게 전파되는 건 자연스러운 구조입니다.

2. 성능적 이유#

이벤트를 모든 자식 요소마다 등록하는 대신, 부모 요소 하나에만 등록해도 자식 요소의 이벤트를 처리할 수 있습니다.
이런 방식은 이벤트 위임(Event Delegation)이라고 부르며, DOM 요소가 많을수록 성능과 유지보수 면에서 효율적입니다.

📉 실제 문제 예시: dead zone 발생#

1. 중첩 메뉴 구현
   • 각 서브 메뉴 항목에 클릭 이벤트를 등록하고, 상위 메뉴의 이벤트가 발생하지 않도록 stopPropagation()을 사용.
   • 기능적으로는 문제 없지만, 다른 전역 이벤트 핸들러에 영향을 줄 수 있음.
2. 행동 분석 시스템과의 충돌
   • 사용자의 클릭 동선을 추적하는 시스템이 document.addEventListener('click', ...)으로 모든 클릭 이벤트를 감지하려 함.
   • 하지만 stopPropagation()이 사용된 영역에서는 이벤트가 document까지 도달하지 않음.
   • 이로 인해 분석 시스템이 클릭 데이터를 수집하지 못하는 dead zone이 발생.

🧨 이렇게 되면 일부 영역은 사용자 행위 분석이 불가능해집니다.

✅ 더 나은 대안#

문제상황 : “자식 요소에서 이벤트를 발생시키고 싶은데, 버블링 때문에 부모의 핸들러가 같이 실행되는 걸 막고 싶다”
그런데 e.stopPropagation()은 되도록 쓰고 싶지 않아서 다른 방법을 고민 중이다.

• 꼭 하위 요소의 이벤트 정보를 부모에게 전달하고 싶다면:
  • event 객체에 커스텀 데이터를 담거나
  • CustomEvent를 사용해 명시적으로 정보를 전달```

<div
  onClick={() => console.log('부모 클릭')}
  id="parent"
>
  <div id="child">Click me</div>
</div>
<script>
  const child = document.getElementById('child');
  const parent = document.getElementById('parent');

  // 부모에서 커스텀 이벤트 리스너 등록
  parent.addEventListener('custom-action', (e) => {
    console.log('부모가 수신한 커스텀 이벤트:', e.detail);
  });

  child.addEventListener('click', () => {
    const customEvent = new CustomEvent('custom-action', {
      detail: { message: '자식에서 발생시킨 커스텀 이벤트' },
      bubbles: false // 버블링을 막음!
    });
    child.dispatchEvent(customEvent); // 자식이 직접 이벤트 발생
  });
</script>

💡 이 방식의 핵심은?#

• 자식 요소에서 이벤트를 직접 발생시키되
• 버블링 없이 커스텀 이벤트를 명시적으로 발생
• 필요하면 부모에게 명시적으로 전달하거나, 부모가 리스너로 수신만 하도록 설계 가능

결론#

✅ 자식에서 발생한 이벤트가 부모를 트리거하지 않도록 하기 위해 CustomEvent를 사용한 건 좋은 접근입니다. 특히 bubbles: false 옵션을 사용하면 버블링 없이 동작하므로, stopPropagation() 없이도 전파를 막을 수 있어요.