DOM(Document Object Model) – 이벤트 핸들링 – 2 – 이벤트 전파와 이벤트 객체

작성자 wooah

DOM(Document Object Model) – 이벤트 핸들링 – 2 – 이벤트 전파와 이벤트 객체

이벤트 전파: 버블링과 캡처링

이벤트 전파(Event Propagation)는 자바스크립트에서 이벤트가 어떤 순서로 전파되는지를 나타냅니다. 이벤트가 발생한 요소에서 상위 요소로 전파되는 버블링(Bubbling)과 상위 요소에서 발생한 이벤트가 하위 요소로 전파되는 캡처링(Capturing)이라는 두 가지 방식이 있습니다.

1. 캡처링 (Capturing)

캡처링은 이벤트가 상위 요소에서 시작하여 하위 요소로 전파되는 방식입니다. 캡처링 단계에서 이벤트는 가장 상위 요소인 window 객체까지 전파됩니다. 이때, 이벤트는 하위 요소부터 상위 요소 순서로 처리됩니다.

예를 들어, 아래와 같은 HTML 구조가 있다고 가정해봅시다.

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

만약 button 요소에서 클릭 이벤트가 발생한다면, 이벤트는 캡처링 단계에서 window -> outer -> inner -> button 순서로 전파됩니다.

2. 버블링 (Bubbling)

버블링은 이벤트가 하위 요소에서 시작하여 상위 요소로 전파되는 방식입니다. 버블링 단계에서 이벤트는 상위 요소부터 하위 요소 순서로 처리됩니다.

위의 예시에서 button 요소에서 발생한 클릭 이벤트는 버블링 단계에서 button -> inner -> outer -> window 순서로 전파됩니다.

이벤트 객체 (Event Object)

이벤트가 발생하면 자바스크립트는 이벤트 객체(Event Object)를 생성합니다. 이벤트 객체에는 해당 이벤트에 관련된 정보와 메서드가 포함되어 있습니다. 이벤트 핸들러 함수 내에서 이벤트 객체를 사용하여 이벤트의 세부 정보를 알 수 있습니다.

예를 들어, 클릭 이벤트에 대한 정보를 얻고 싶다면 클릭 이벤트 핸들러 함수의 매개변수로 이벤트 객체를 받을 수 있습니다.

document.getElementById('button').addEventListener('click', function(event) {
  console.log('클릭 이벤트가 발생했습니다!');
  console.log('이벤트 타겟:', event.target); // 이벤트가 발생한 요소(button)
  console.log('이벤트 타입:', event.type); // 이벤트의 타입(click)
});

이벤트 객체를 통해 이벤트가 발생한 요소, 이벤트의 타입 등을 확인할 수 있습니다. 또한, stopPropagation() 메서드를 사용하여 이벤트 전파를 중지시킬 수도 있습니다.

주의해야 할 점

  1. 이벤트 전파는 기본적으로 버블링 방식으로 동작합니다. 만약 캡처링 단계에서 이벤트를 처리하고 싶다면, addEventListener 메서드의 세 번째 매개변수로 true를 전달하여 캡처링을 활성화해야 합니다.
element.addEventListener(eventType, eventHandler, true);

  1. 이벤트 객체의 target 속성은 이벤트가 실제로 발생한 요소를 가리킵니다. 하지만 이벤트 핸들러 함수 내에서 this 키워드를 사용하면 현재 요소를 가리키게 됩니다.

  2. 이벤트 전파를 중지시키기 위해 stopPropagation() 메서드를 사용할 때, 주의해야 합니다. 이 메서드는 이벤트 전파를 현재 요소에서 중지시키지만, 다른 이벤트 핸들러들은 여전히 실행될 수 있습니다.

이벤트 전파와 이벤트 객체는 웹 개발에서 상호작용과 사용자 경험을 개선하는 데 중요한 역할을 합니다. 이해를 돕기 위해 비유적인 표현을 사용하면, 이벤트 전파는 마치 돌을 던져 물결이 일어나는 것과도 비슷합니다. 돌을 던지는 위치와 세기에 따라 물결은 상향 또는 하향으로 전파되는 것처럼, 이벤트도 발생한 위치와 방식에 따라 전파됩니다.

이벤트 전파와 이벤트 객체를 이해하면, 웹 페이지에서 발생하는 다양한 이벤트에 대응하고 필요한 작업을 처리하는 데 도움이 됩니다. 이러한 기능을 적절히 활용하여 사용자와 원활한 상호작용을 제공할 수 있습니다.

답글 남기기