JavaScript Academy · 강의

캡처 단계와 버블 단계

이벤트가 DOM을 통해 이동하는 방식을 이해합니다.

캡처 단계와 버블 단계은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

DOM을 통과하는 두 번의 이동

요소를 클릭하면 이벤트는 해당 요소에서만 발생하지 않습니다. 이벤트는 두 단계로 DOM 트리를 통과합니다. 캡처 단계에서는 document에서 대상까지 위에서 아래로 이동하고, 버블 단계에서는 대상에서 다시 document까지 아래에서 위로 이동합니다.

<div id="outer">
  <button id="inner">Click</button>
</div>

기본 동작: 버블링

기본적으로 addEventListener는 버블 단계에서 수신 대기합니다. 내부 버튼을 클릭하면 먼저 해당 버튼의 handler가 실행되고, 그다음 부모의 handler, 조부모의 handler가 실행되는 식으로 document까지 이어집니다.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

캡처 사용 설정하기

세 번째 인수로 true(또는 { capture: true })를 전달하면 대신 캡처 단계에서 수신 대기합니다. 캡처 handler는 모든 버블 handler보다 먼저 위에서 아래로 실행됩니다.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

전체 순서

#inner를 클릭하고 두 단계 모두에 handler가 있으면 순서는 캡처 단계의 위에서 아래, 대상, 버블 단계의 아래에서 위입니다.

document 캡처
outer 캡처
inner(대상)
outer 버블
document 버블

event.target과 event.currentTarget

event.target은 실제로 이벤트를 발생시킨 요소, 즉 클릭이 일어난 요소입니다. event.currentTarget은 현재 listener가 실행 중인 요소입니다. 버블링하는 부모 handler에서는 두 값이 서로 다릅니다.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

전파 중지하기

event.stopPropagation()은 이벤트의 이동을 중단합니다. 이벤트는 현재 단계에서 다음 요소로 계속 전파되지 않으며, 트리에서 더 상위에 있는 부모 handler도 실행되지 않습니다.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation()은 같은 요소에 있는 다른 리스너도 계속 실행되도록 합니다. 같은 요소의 형제 리스너까지 차단하려면 event.stopImmediatePropagation()을 사용하십시오.

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault는 다릅니다

preventDefault()와 stopPropagation()을 혼동하지 마십시오. preventDefault()는 브라우저의 기본 동작(링크 따라가기, form 제출)을 취소하지만 이벤트가 버블링되는 것은 막지 않습니다.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

캡처를 거의 사용하지 않는 이유

대부분의 코드는 직관에 맞는 버블링을 사용합니다. 특정 요소가 먼저 반응하고, 그다음 컨테이너가 이를 알아차리기 때문입니다. 부모가 자식에게 이벤트가 전달되기 전에 가로채거나 거부해야 할 때 캡처가 유용합니다.

단계 확인하기

event.eventPhase는 현재 활성화된 단계를 알려 줍니다. 1은 캡처, 2는 대상, 3은 버블링입니다. 이 기능은 거의 필요하지 않지만 복잡한 리스너 연쇄를 디버깅할 때 도움이 됩니다.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

모든 이벤트가 버블링되는 것은 아닙니다

대부분의 UI 이벤트(click, input, keydown)는 버블링됩니다. 하지만 focus, blur, mouseenter처럼 기본적으로 버블링되지 않는 이벤트도 일부 있습니다. 이런 경우에는 버블링 변형인 focusin, focusout 또는 캡처 단계를 사용하십시오.

빠른 확인

이벤트 단계에 대한 이해도를 확인해 보십시오.

복습

이벤트는 먼저 캡처(아래 방향)를 거친 다음 버블링(위 방향)됩니다. 리스너는 기본적으로 버블링을 사용하며, 캡처에는 true를 전달합니다. e.target은 발생 지점이고 e.currentTarget은 리스너를 소유한 요소입니다. 이동을 중단하려면 stopPropagation()을 사용하고, 기본 동작을 취소하려면 preventDefault()를 사용하십시오. 이 두 단계는 이벤트 위임의 기반입니다.

자주 묻는 질문

“캡처 단계와 버블 단계” 강의는 무료인가요?

네 — “캡처 단계와 버블 단계” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“캡처 단계와 버블 단계”에서 뭘 배우나요?

이벤트가 DOM을 통해 이동하는 방식을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“캡처 단계와 버블 단계” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기