Skip to content

Latest commit

 

History

History
52 lines (36 loc) · 2.84 KB

Bubbling-Capturing.md

File metadata and controls

52 lines (36 loc) · 2.84 KB
Raw

이벤트 버블링(Bubbling)과 캡처링(Capturing)

image

이벤트 버블링(Bubbling)과 캡처링(Capturing)은 DOM(Documet Object Model)에서 이벤트가 전파되는 두 가지 메커니즘입니다. 이 두 방식은 이벤트가 발생했을 때, 해당 이벤트가 어떻게 상위 혹은 하위 요소로 전파되는지를 정의합니다.

이벤트 버블링(Event Bubbling)

이벤트 버블링은 이벤트가 발생한 가장 깊은 요소에서 시작해서, 점점 상위 요소로 전파되는 현상을 말합니다. 예를 들어, <button> 요소 안에서 클릭 이벤트가 발생하면, 해당 이벤트는 먼저 <button>에 할당된 핸들러를 트리거한 후, <button>의 부모 요소로 이동하고, 그 다음은 그 부모의 부모 요소로 이동하며, 이 과정은 최상위의 문서 객체(document)에 도달할 때까지 계속됩니다. 이벤트 버블링은 기본적으로 모든 이벤트에서 활성화되어 있습니다.

이벤트 캡처링(Event Capturing)

이벤트 캡처링은 이벤트 버블링과 반대로 작동합니다. 이벤트가 최상위 요소에서 시작하여, 점점 하위 요소로 전파되는 과정을 말합니다. 이벤트 캡처링은 이벤트를 목표 요소에 도달하기 전에 잡아내는 방식으로, 특정 상황에서 유용하게 사용할 수 있습니다. 이벤트 캡처링은 기본적으로 비활성화되어 있으며, 명시적으로 설정해주어야 합니다.

이벤트 리스너에 캡처링과 버블링 설정하기

이벤트 리스너를 추가할 때, 세 번째 매개변수로 true를 설정하면 캡처링 단계에서 이벤트를 처리하고, false를 설정하면 버블링 단계에서 이벤트를 처리합니다. 기본값은 false입니다.

// 이벤트 캡처링 단계에서 이벤트를 리스닝
element.addEventListener(
  "click",
  function (event) {
    // 핸들러 코드
  },
  true
);

// 이벤트 버블링 단계에서 이벤트를 리스닝 (기본값)
element.addEventListener("click", function (event) {
  // 핸들러 코드
}); // 또는 {capture: false}

중요 포인트

  • 대부분의 이벤트 핸들링은 버블링 단계에서 수행됩니다.
  • 캡처링을 사용할 일은 드물지만, 특정 이벤트를 상위 요소가 먼저 처리해야 할 경우 유용합니다.
  • 이벤트의 전파를 중지하고자 할 때 event.stopPropagation() 메서드를 호출하여, 현재 요소에서 더 이상 이벤트가 전파되지 않도록 할 수 있습니다.
  • event.preventDefault() 메서드는 이벤트의 기본 동작을 막는데 사용되지만, 이벤트의 전파 자체를 멈추지는 않습니다.

Reference

Back