웹 페이지에서 이벤트가 발생하면 해당 이벤트가 부모나 자식 요소로 전파됩니다. 이벤트 전파에 대한 이해는 이벤트 핸들링과 상호작용하는 웹 애플리케이션을 개발하는 데 중요합니다. 자바스크립트에서는 이벤트 버블링과 이벤트 캡처링을 통해 이벤트 전파를 다룰 수 있습니다.

이벤트 버블링

이벤트 버블링은 자식 요소에서 이벤트가 발생했을 때 해당 이벤트가 부모 요소까지 전파되는 현상을 말합니다. 이를 방지하려면 event.stopPropagation() 메서드를 사용하면 됩니다.

document.getElementById('childElement').addEventListener('click', function(event) {
  event.stopPropagation();
  // 이벤트 처리 로직
});

이벤트 캡처링

이벤트 캡처링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 현상을 말합니다. 이벤트 캡처링을 이용하여 이벤트를 처리하려면 addEventListener의 세 번째 매개변수에 true를 전달하면 됩니다.

document.getElementById('parentElement').addEventListener('click', function(event) {
  // 이벤트 처리 로직
}, true);

자바스크립트에서 이벤트 전파를 다루는 방법은 중요하며, 웹 애플리케이션에서 원하는 동작을 구현하기 위해 이를 잘 활용해야 합니다.

더 많은 정보를 원하시면 MDN 웹 문서를 참조하세요. MDN Web Docs - Event Propagation