버블링(Bubbling)과 Event delegation

버블링이란?

클릭한 지점이 하위 엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트 리스너가 있는지 찾는 과정

설명

html

<div id="div1">
  div1
  <div id="div2">
    div2
    <div id="div3">
      div3
    </div>
  </div>
</div>

css

#div1 {
  width: 150px;
  height: 150px;
  border: 1px solid blue;
}

#div2 {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  position: absolute;
  top: 30px;
  left: 30px;
}

#div3 {
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  position: absolute;
  top: 25px;
  left: 25px;
}

 

javascript

let div = document.getElementById("div1");

div.addEventListener("click", (event) => {
  console.log(event.currentTarget, event.target);
});

 

결과

 

• div1에만 이벤트 리스너를 등록했지만 div3을 클릭하면 div1의 이벤트 리스너가 실행된다.
• div3 -> div2 -> div1 순서로 이벤트 리스너를 찾는다.
• event.target: 클릭된 div3을 반환
• event.currentTarget: 이벤트가 실행된 div 요소를 반환

Event delegation(이벤트 위임)

• 사용자의 액션에 의해 이벤트 발생 시 이벤트는 document 레벨까지 버블링 되어 올라간다. 이 때문에 자식 엘리먼트에서 발생하는 이벤트를 부모 엘리먼트에서 감지하여 처리할 수 있다.
• 특정 엘리먼트에 하나하나 이벤트를 등록하지 않고 하나의 부모에 등록하여 부모에게 이벤트를 위임하는 방법

소스코드

html

<ul>
  <li><div id="item1">item1</div></li>
  <li><div id="item2">item2</div></li>
  <li><div id="item3">item3</div></li>
  <li><div id="item4">item4</div></li>
</ul>

 

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

document.getElementById("item1").addEventListener("click", function(evt){
  // item1 클릭시 동작
});
document.getElementById("item2").addEventListener("click", function(evt){
  // item2 클릭시 동작
});
document.getElementById("item3").addEventListener("click", function(evt){
  // item3 클릭시 동작
});

 

이벤트 위임을 한 경우

var ul = document.querySelector("ul");
ul.addEventListener("click", function(evt) {
    var target = evt.target;
    if(target.id === "item1"){
      // item1 클릭시 동작
    } else if(target.id === "item2"){
      // item2 클릭시 동작
    } else if(target.id === "item3"){
      // item3 클릭시 동작
    }
});

장점

• 동일한 이벤트를 한 곳에서 관리할 수 있다.
• addEventListener 사용 횟수를 줄여서 메모리 사용량이 줄어든다.

참조

버블링 - https://www.boostcourse.org/web316/lecture/254331
버블링 - https://ko.javascript.info/bubbling-and-capturing
Event delegation - https://www.boostcourse.org/web316/lecture/254332/
Event delegation - https://ui.toast.com/weekly-pick/ko_20160826