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

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

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

To do 1 To do 2

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

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

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

To do 1 X To do 2 X

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

span, button{ pointer-events: none; }

from http://jjakddo-studio.tistory.com/6 by ccl(A) rewrite - 2021-11-18 01:27:07