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

동적 이벤트 리스너 첨부

귀하가 소유하지 않은 웹페이지에서 동적으로 생성된 요소에 이벤트 리스너를 첨부하려고 합니다. jQuery를 사용할 수 없으므로 대체 솔루션을 모색합니다.

이 시나리오에서는 이벤트 위임이 실행 가능한 접근 방식입니다. 상위 수준 요소(예: 본문)에 리스너를 연결하면 동적으로 생성된 요소를 포함하여 하위 요소에서 버블링되는 이벤트를 캡처할 수 있습니다.

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

이 스니펫에서:

• body 요소에 클릭 이벤트 리스너를 추가합니다.
• 클릭 이벤트가 발생하면 event.target의 tagName을 확인합니다.
• 대상이 <인 경우 ;리> 요소에 따라 원하는 작업을 실행합니다.

이 접근 방식은 이벤트 버블링에 의존합니다. 이 메커니즘을 지원하지 않는 일부 이전 브라우저에서는 작동하지 않을 수 있습니다. 또한 동적으로 생성된 요소가 다른 요소 내에 중첩된 경우(예:

내
• ) 그에 따라 이벤트 위임 선택기를 조정해야 할 수도 있습니다.

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