addEventListener의 세 번째 인자, true vs false 차이점! (캡처링 vs 버블링 쉽게 이해하기)

 

웹 개발하면서 이벤트 걸 때 이렇게 쓰는 코드 많이 보셨죠?

element.addEventListener('click', handler, true);

근데 마지막 true는 도대체 뭘까요?
이게 바로 "캡처링"이냐 "버블링"이냐를 결정하는 핵심이에요!
진짜 쉽게 알려드릴게요 😎

 

2025.08.01 - [개발 일지 👩‍💻] - 이벤트 캡처링(Capturing)과 버블링(Bubbling) 쉽게 이해하기

이벤트 캡처링(Capturing)과 버블링(Bubbling) 쉽게 이해하기

 

✅ addEventListener 기본 사용법

element.addEventListener('이벤트이름', 실행함수, useCapture);

마지막 useCapture 자리가 중요합니다!

true 👉 캡처링 단계에서 실행

false 👉 버블링 단계에서 실행 (기본값)

✅ 이벤트는 어떻게 전파될까?
이벤트는 발생하면 아래 3단계를 거쳐요:

캡처링 단계
👉 document부터 아래로 ↓ 내려옴

타깃 단계
👉 실제 클릭된 그 요소

버블링 단계
👉 클릭된 요소에서 위로 ↑ 올라감

✅ true vs false 예시

<div id="parent">
  <button id="child">클릭</button>
</div>

// 캡처링 단계
document.getElementById('parent').addEventListener('click', function() {
  console.log('부모');
}, true);

// 버블링 단계
document.getElementById('child').addEventListener('click', function() {
  console.log('자식');
}, false); // 기본값

이 버튼을 클릭하면 콘솔엔 이렇게 찍혀요:

 

부모
자식

왜?

먼저 캡처링 단계니까 부모(true)가 먼저 실행되고,

그 다음 버블링 단계에서 자식(false)이 실행되니까요!

✅ 진짜 헷갈릴 땐?
특별한 경우 아니면 대부분 false로 써요!

캡처링(true)은 이벤트 우선 제어가 필요할 때만 써요.

🎯 정리 한 줄 요약
true는 캡처링, false는 버블링이에요!
이벤트가 내려갈 때 실행할지, 올라갈 때 실행할지 차이!

#자바스크립트 #이벤트리스너 #버블링 #캡처링 #addEventListener #웹개발팁 #프론트엔드기초 #개발공부 #코딩기초 #JS이벤트