동적으로 생성된 요소에 대한 이벤트 리스너

jQuery 없이 동적으로 생성된 요소에 이벤트 리스너를 추가하려면 이벤트 위임을 사용할 수 있습니다. 방법은 다음과 같습니다.

이벤트 위임 사용
이벤트 객체의 target 속성을 사용하면 이벤트가 발생한 요소를 식별할 수 있습니다. 이를 사용하면 이벤트 리스너를 상위 요소에 바인딩하고 대상 요소가 특정 기준에 응답하는지 확인할 수 있습니다. 예:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});

이 예에서 이벤트 리스너는 본문에 바인딩되어 있으며 하위 요소에서 클릭이 발생하면 코드는 해당 요소가 'li'인지 확인합니다. 그렇다면 지정된 작업이 수행됩니다.

주의 사항
이 접근 방식은 이벤트 위임 메커니즘을 지원하는 최신 브라우저에서 잘 작동합니다. 이전 IE 버전의 경우, attachmentEvent를 사용하여 사용자 정의 이벤트 핸들러를 구현해야 할 수도 있습니다.