>  기사  >  웹 프론트엔드  >  jQuery 없이 동적으로 생성된 요소에 대한 이벤트 리스너를 처리하는 방법은 무엇입니까?

jQuery 없이 동적으로 생성된 요소에 대한 이벤트 리스너를 처리하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-10-22 12:08:02588검색

How to Handle Event Listeners for Dynamically Created Elements Without jQuery?

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

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

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

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

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

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

위 내용은 jQuery 없이 동적으로 생성된 요소에 대한 이벤트 리스너를 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.