이벤트 전파

이벤트 전파란

이벤트가 위아래로 퍼져 나가는 과정이다

 

예를 들어 버튼을 누르는 이벤트가 발생한다면, 그 이벤트가 위로 올라가거나, 아래로 내려가며 전달되는 것

 

이벤트 캡처링

이벤트가 위에서 아래로 내려간다

최상위 요소에서 이벤트 타겟 요소로

 

이벤트 타겟

이벤트가 실제로 클릭된 요소에 전달된다

 

이벤트 버블링

이벤트가 다시 위로 올라간다

이벤트 타겟 요소에서 최상위 요소로

 

이벤트 캡처링과 버블링 단계가 존재하는 이유

더 많은 유연성과 제어를 제공하기 위해서

 

이벤트 캡처링 과정에서 부모 요소가 타겟 요소보다 이벤트를 먼저 감지함으로써

필요한 작업을 사전에 수행하거나, 이벤트 전파를 막을 수 있다

 

이벤트 버블링 과정에서 타겟 요소에서 이벤트가 발생한 이후 부모 요소로 전달되는 과정에서 상위 요소들이 이벤트에 추가적으로 반응하거나 처리할 기회를 가진다

 

이벤트 전파 막기

e.stopPropagation() 메소드를 이용해 이벤트가 다른 요소에 전파되는 것을 막을 수 있다

 

이벤트 전파 과정은 이벤트 캡처링, 타겟, 이벤트 버블링의 세 단계로 나눌 수 있지만

기본적으로 모든 이벤트는 버블링 단계에서 처리된다

만약 이벤트 캡처링을 사용하고 싶다면 addEventListener 메서드의 세 번째 인자로 true를 설정해야 한다

 

이벤트 위임

여러 개의 버튼이나 체크 박스가 있을 때, 각각 이벤트를 설정하는 대신,

부모 요소에 이벤트를 설정하여 이벤트를 자식 요소로 전파하는 과정에서

클릭된 자식 요소가 무엇인지 체크하고, 적절한 작업을 수행하는 방식

 

이벤트 위임을 하지 않은 경우

let inputs = document.querySelectorAll("input");
inputs.forEach((input) => {
  input.addEventListener("click", () => {
    alert("clicked");
  });
});

 

이벤트 위임을 한 경우 - 버블링 (기본 동작)

const itemList = document.querySelector(".itemList");
itemList.addEventListener("click", (e) => {
    if (e.target.type === "checkbox") {
        alert("click (bubble)");
    }
});

 

이벤트 위임을 한 경우 - 캡처링

const itemList = document.querySelector(".itemList");
itemList.addEventListener("click", (e) => {
    if (e.target.type === "checkbox") {
        alert("click (capture)");
    }
}, true); // 캡처링