이벤트 위임과 버블링

이벤트 위임

• 이벤트 위임은 하위 요소들의 공통 상위 요소를 갖는 요소에게 이벤트를 주는 방법이다.
  상위 요소에 이벤트를 설정하면 어떤 하위 요소를 클릭하더라도 상위 요소의 이벤트를 위임 받아 설정된 이벤트가 작동될 수 있다.

이벤트 버블링

• 버블링은 이벤트 핸들러가 걸린 요소를 클릭했을때 해당 요소를 시작으로 부모 요소, body, html 최상단 요소까지 핸들러가 반복되는 현상을 말한다. addEventListener의 capture가 false로 되어있거나 공백으로 채워있다면 버블링이 작동한다.

예시

HTML Code

    <ul class="parent">
      <li class="one">자식1</li>
      <li class="two">자식2</li>
      <li class="three">자식3</li>
    </ul>

JS Code

    document
      .querySelector(".one")
      .addEventListener("click", function (event) {
      console.log(event.target.innerText);
    });
    document
      .querySelector(".two")
      .addEventListener("click", function (event) {
      console.log(event.target.innerText);
    });
    document
      .querySelector(".three")
      .addEventListener("click", function (event) {
      console.log(event.target.innerText);
    });

• 이벤트 위임과 버블링을 사용하지 않고 li의 텍스트를 출력하는 방법이다.
• 코드의 양이 많고 반복적인 작업이 있다는 것이 특징이다.
• 새로운 li 요소가 추가된다면 코드를 추가적으로 작성해야한다.

JS Code

    const parent = document.querySelector(".parent");
    function handleClick(event) {
      if (event.target.tagName === "LI") {
        console.log(event.target.innerText);
      }
    }
    parent.addEventListener("click", handleClick);

• 이벤트 위임과 버블링을 활용하여 코드를 고친 예시이다.
• ul의 이벤트 위임으로 li를 클릭하면 이벤트를 할당한다.
• li가 클릭되면 이벤트가 버블링되어 부모 요소인 ul에서 이벤트를 감지하고 처리가 가능하다.
• 위 코드와 같은 기능을 하지만 가독성이 좋고 코드의 양이 줄어들었다.

완성본

• 실행 화면
  
• Console