Colin's Blog
[javascript] 이벤트 전달 방법 정리

이벤트 전달은 웹 개발에서 중요한 부분 중 하나로, 사용자의 상호작용에 따라 적절한 동작이 실행되도록 하는 데에 필수적입니다. 이번 포스트에서는 자바스크립트에서 이벤트 전달 방법을 몇 가지 알아보겠습니다.

1. 이벤트 버블링 (Event Bubbling)

이벤트 버블링은 HTML 요소에서 발생한 이벤트가 부모 요소로 전파되는 방식을 말합니다. 즉, 자식 요소에서 이벤트가 발생했을 때 이 이벤트가 부모 요소에서도 발생하는 방식입니다.

// 예시
document.getElementById("childElement").addEventListener("click", function(event) {
  console.log("이벤트 발생: " + event.target.id);
});

위의 예시에서 childElement를 클릭하면 해당 이벤트가 자식 요소뿐만 아니라 부모 요소에도 전파되어 실행됩니다.

2. 이벤트 캡처링 (Event Capturing)

이벤트 캡처링은 이벤트 버블링과는 반대로, 상위 요소부터 하위 요소까지 전파되는 방식을 말합니다. 즉, 최상위 요소에서 이벤트가 시작되어 실제 대상 요소에 이벤트까지 도달할 때까지 순차적으로 전파됩니다.

// 예시
document.getElementById("parentElement").addEventListener("click", function(event) {
  console.log("이벤트 발생: " + event.target.id);
}, true);

위의 예시에서 parentElement를 클릭하면 해당 이벤트가 상위 요소부터 하위 요소까지 전파되어 실행됩니다.

3. 이벤트 위임 (Event Delegation)

이벤트 위임은 이벤트 전파를 이용하여 동적으로 생성된 요소에 이벤트를 적용하는 방식을 말합니다. 이는 특정 요소에 대한 이벤트 처리뿐만 아니라 해당 요소의 자식 요소에 대해서도 이벤트를 일괄적으로 처리할 수 있는 장점을 가지고 있습니다.

// 예시
document.getElementById("parentElement").addEventListener("click", function(event) {
  if (event.target && event.target.nodeName === "LI") {
    console.log("이벤트 발생: " + event.target.id);
  }
});

위의 예시에서 parentElement의 자식으로 추가된 LI 요소를 클릭하면 상위 요소에서 이벤트를 감지하고 해당하는 LI 요소에 대한 이벤트를 처리합니다.

이렇듯 자바스크립트에서는 다양한 방법으로 이벤트를 전파할 수 있으며, 각 방법에 맞게 적절히 활용함으로써 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참조:

© 2018 Colin. All rights reserved.