jQuery를 사용하지 않고 동적으로 생성된 요소에 대한 이벤트를 어떻게 수신할 수 있습니까?

동적으로 생성된 요소에 이벤트 리스너를 추가하는 방법

동적 콘텐츠가 포함된 웹 페이지에서 작업할 때 동적 콘텐츠가 포함되지 않은 요소에 이벤트 리스너를 추가해야 할 수도 있습니다. 처음에는 페이지에 표시됩니다. 이 가이드에서는 jQuery에 의존하지 않고 이를 달성하는 방법을 설명합니다.

원래 접근 방식에서는 doc.body.addEventListener('click')를 활용하여 페이지 로드 시 기존 요소에 대한 이벤트를 처리하는 것이 포함되었습니다. 그러나 동적으로 생성된 요소의 경우 보다 강력한 솔루션이 필요합니다.

위임 및 이벤트 전파

이벤트 리스너를 동적으로 추가하는 핵심은 이벤트 위임입니다. 이 접근 방식을 사용하면 단일 이벤트 리스너를 상위 요소(예: 본문)에 연결한 다음 이벤트 대상을 확인하여 클릭된 특정 요소를 확인할 수 있습니다.

샘플 코드

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

이 예에서는 이벤트 리스너가 본문에 연결되어 있습니다. 본문 내의 요소를 클릭하면 이벤트 대상이 검사됩니다. 대상이 li 요소인 경우 원하는 작업이 수행됩니다.

주의사항

제공된 코드는 최신 브라우저와 호환됩니다. 이전 버전의 Internet Explorer와의 브라우저 호환성을 위해 기본 이벤트 기능에 대한 사용자 정의 래퍼가 필요할 수 있습니다.

위 내용은 jQuery를 사용하지 않고 동적으로 생성된 요소에 대한 이벤트를 어떻게 수신할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!