JavaScript의 이벤트 캡처 및 이벤트 버블링 이해

안녕하세요!

오늘은 이벤트 JavaScript에서 이벤트 캡처 및 이벤트 버블링의 개념에 대해 자세히 살펴보도록 하겠습니다.

이 두 가지 개념을 이해하면 응용 프로그램 내에서 사용자 상호 작용을 더 잘 처리하고 복잡한 이벤트 처리 시나리오를 관리할 수 있습니다.

이벤트 캡처와 이벤트 버블링이 무엇인가?

이벤트 캡처 및 이벤트 버블링은 DOM(문서 개체 모델)에서 이벤트 전파의 두 단계입니다.

클릭이나 키 누르기와 같은 이벤트가 트리거되면 브라우저는 어떤 요소가 어떤 순서로 이벤트를 수신해야 하는지 결정하는 프로세스를 거칩니다.

이벤트 캡처(또는 이벤트 트리클링)

이벤트 캡처는 이벤트 전파의 첫 번째 단계입니다.

이 단계에서 이벤트는 DOM 트리(일반적으로 window 또는 document 객체)의 루트에서 시작하여 대상 요소를 향해 트리 아래로 전파되어 프로세스의 모든 조상을 통과합니다.

이 단계에서는 의도한 대상에 도달하기 전에 이벤트를 가로챌 수 있습니다.

이벤트 버블링

이벤트 버블링은 이벤트 전파의 두 번째 단계입니다.

이벤트가 대상 요소에 도달하면 DOM 트리를 "버블링"하기 시작하여 캡처 단계에서 방문했던 역순으로 각 대상 요소의 조상에서 이벤트 리스너를 트리거합니다.

이것은 JavaScript에서 대부분의 이벤트에 대한 기본 동작입니다.

예: 캡처 및 버블링 실행


<div id="parent">
  <button id="child">Click me!</button>
</div>

<script>
  const parent = document.getElementById("parent");
  const child = document.getElementById("child");

  parent.addEventListener("click", () => console.log("Parent (Capturing)"), { capture: true });
  child.addEventListener("click", () => console.log("Child (Capturing)"), { capture: true });

  parent.addEventListener("click", () => console.log("Parent (Bubbling)"));
  child.addEventListener("click", () => console.log("Child (Bubbling)"));
</script>

이 예에서 버튼을 클릭하면 다음과 같은 콘솔 로그 순서가 표시됩니다.


Parent (Capturing)
Child (Capturing)
Child (Bubbling)
Parent (Bubbling)

Event.stopPropagation()

경우에 따라 이벤트가 DOM 트리를 따라 더 이상 전파되지 않도록 해야 할 수 있습니다.

이를 달성하기 위해 event.stopPropagation() 메서드를 사용할 수 있습니다.

이 메서드는 캡처 또는 버블링 여부에 관계없이 이벤트가 다음 단계로 이동하는 것을 중지합니다.


const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", () => console.log("Parent (Bubbling)"));
child.addEventListener("click", (e) => {
	e.stopPropagation();
	console.log("Child (Bubbling)");
});

위의 예시를 통한다면 child 버튼을 클릭 시 parent로 이벤트가 이동하는 것을 막을 수 있습니다.

이러한 케이스는 보통 어디에 쓰이냐?

예를 들자면 제가 지금 개발하고 있는 블로그 프로젝트에서도 사용할 수 있습니다.

위의 이미지를 예로 들 수 있는데, 이 하나의 포스팅에서 두개의 이벤트 빨간색 영역을 클릭(블로그 상세)했을 떄와 파란색 영역을 클릭(태그 쿼리 변경)했을 때가 있다고 한다면, 큰 틀에서 보았을때 빨간색은 parent, 파란색은 child 일 겁니다.

그럼 우리는 파란색 버튼을 눌러서 쿼리를 변경하고 싶은데, 이벤트 버블링에 의해 블로그 상세로 이동하게 될 것입니다. 이럴때 우리는 stopPropagation() 메서드를 사용해서 블로그 상세로 이동하는 것을 막을 수 있습니다.

결론

JavaScript 애플리케이션에서 사용자 상호 작용을 효과적으로 관리하려면 이벤트 캡처 및 이벤트 버블링을 이해하는 것이 중요합니다.

이벤트 전파의 이 두 단계를 활용하여 복잡한 이벤트 시나리오를 효율적으로 처리하고, 이벤트가 대상에 도달하기 전에 차단하고, event.stopPropagation()을 사용하여 원치 않는 전파를 방지할 수 있습니다.

이러한 개념을 확실하게 이해하면 동적이고 반응이 빠른 응용 프로그램을 만들 준비가 더 잘 될 것입니다.

JavaScript의 이벤트 캡처 및 이벤트 버블링 이해생성일2023. 4. 27.태그작성자지한솔