Event Delegation(이벤트 위임)

여러 개의 노드에 같은 이벤트를 등록해야하는 상황에서 부모노드(element)에 하나의 이벤트 리스너를 등록하는 방법.
메모리 절약에 좋음.

<div class='parent'>
  <button class='kid btn1'><span>btn1</span></button>
  <button class='kid btn2'><span>btn2</span></button>  
  <button class='kid btn3'><span>btn3</span></button>  
</div>

const parent = Document.querySelector('parent')

function handleClick(e){
    const clikced = e.target
    if(!clikced.classList.contains('kid')) return;
      console.log('hey you clicked me!')
}

parent.addEventListener('click', handleClick)

parent Node의 버튼이 아닌 다른 부분을 클릭했을 때 원하지 않는 기능을 피하기 위해 원하는 class를 가지고 있지 않다면 아무것도 하지 않고 return 해서 함수를 죽이는 방법을 쓴다.

그런데 글씨인 span tag를 클릭했을 때도 classList에 kid가 없기 때문에 아무 반응이 일어나지 않는다.
이를 방지하기 위해 쉽게는 css에서 span tag에 pointer-events: 'none' 속성을 주면 된다.

혹은 부모객체를 타고 올라가 부모의 classList에 parent가 있는지 확인하는 자바스크립트를 쓴다.

const parent = Document.querySelector('parent')

function handleClick(e){
    const element = e.target;
    while(!element.classList.contains('parent'){
          element = element.parentNode;
          }
}

parent.addEventListener('click', handleClick)

이렇게 :)