[Javascript] Vanilla JS로 동적으로 생성된 노드에 이벤트핸들러 추가하기

동적으로 생성한 노드에 이벤트 핸들러를 추가하려면 에러가 발생하는 경우가 있다. 한 가지 해결방법으로는 부모 노드에 이벤트핸들러를 추가하면 된다. 그러면 모든 자식 노드 (동적으로 생성되는 자식 노드 포함)에 해당 이벤트 핸들러가 추가된다. 

<ul id="list">
  <li> To do 1 </li>
  <li> To do 2 </li>
</ul>

위 예제에서 li에 클릭 이벤트핸들러를 추가하고 싶다면 다음과 같이 ul에 이벤트핸들러를 추가하면 된다.

const ul = document.getElementById("list");

ul.addEventHandler('click', event => {
  const target = event.target;
  if(target.matches('li'))}
  	callback();
  }
});

만약 li에 아래와 같이 자식 노드가 추가된다면, 클릭했을 때 target은 span과 button이 될것이다. 그러므로 필요에 맞춰서 로직을 변경할 필요가 있다.

<ul id="list">
  <li>
    <span>To do 1 </span>
    <button> X </button>
  </li>
  <li>
    <span>To do 2 </span>
    <button> X </button>
  </li>
</ul>

만약 span과 button을 클릭해도 li를 반환하게 하고 싶다면 다음과 같은 css 룰을 추가하면 된다.

span, button{
	pointer-events: none;
}