Event Bubbling & Delegation

Event Bubbling

어떤 요소의 이벤트 핸들러가 동작할 때 그 요소의 상위, 더 나아가 최상단 요소의 핸들러까지 동작해버리는 현상을 이야기 한다.

 

// Event Bubbling card-title을 클릭했지만 아래 모든 핸들러가 전부 동작해버림
document.querySelector(".card-title").addEventListener("click", function(e) {
  console.log("card title");
});

document.querySelector(".card-content").addEventListener("click", function(e) {
  console.log("card content");
});

document.querySelector(".card").addEventListener("click", function(e) {
  console.log("card");
});

document.querySelector(".col").addEventListener("click", function(e) {
  console.log("col");
});

 

Event Delegation (이벤트 위임)

Event Delegation은 위와 같은 버블링 현상을 이용하여 같은 형제요소에 이벤트를 여러번 등록하는 대신 상위 요소에 이벤트를 한번 등록하고 필터함으로 좀 더 효율적으로 이벤트를 이용하도록 하는 방법이다. 또한 document가 로드되고 나서 추가된 DOM 객체들에 대해 이벤트를 걸어야할 때, document 로드 후에 존재하는 상위부모요소에 이벤트를 거는 용도로도 이용된다. ( 간단히 말하면 아직 존재하지 않은 DOM 객체에 이벤트를 걸어야할 때 이용된다는 뜻 )

 

document.body.addEventListener("click", deleteItem);

function deleteItem(e) {
  if(e.target.parentElement.className === "delete-item secondary-content") {
    console.log(`delete item`);
  }
}

 

위와 같이 이벤트를 위임하여 이벤트를 각각의 delete-item에 할당하는 대신 상위 요소인 body에 하나만 할당하고 내부에서 조건문을 이용하여 필터함으로 효율적으로 코딩할 수 있다.