내 JavaScript 이벤트 리스너가 동적으로 생성된 요소에서 작동하지 않는 이유는 무엇이며 이벤트 위임을 사용하여 문제를 어떻게 해결할 수 있습니까?

JavaScript의 동적 이벤트 처리

웹 애플리케이션으로 작업할 때 페이지의 요소를 동적으로 생성하고 조작해야 하는 경우가 많습니다. 그러나 동적으로 생성된 요소에 이벤트 핸들러를 연결하는 것은 어려울 수 있습니다.

문제

제공된 코드 조각에서 HTML 버튼이 동적으로 생성되어 DOM에 삽입됩니다. . 그러면 이벤트 리스너가 이 버튼에 연결되지만 버튼을 클릭해도 이벤트 핸들러가 실행되지 않습니다.

이벤트 위임

문제는 이벤트 리스너가 DOM에 추가되기 전에 버튼에 첨부됩니다. 버튼이 동적으로 생성되면 나중에 DOM에 첨부되지만 이벤트 리스너 호출이 이미 발생했습니다.

이에 대한 해결책은 이벤트 위임입니다. 이벤트 위임에는 이벤트 리스너를 대상 요소에 직접 연결하는 대신 부모 요소에 연결하는 작업이 포함됩니다. 이벤트가 발생하면 이벤트는 연결된 이벤트 리스너가 있는 상위 요소에 도달할 때까지 DOM 트리 위로 전파됩니다.

예

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend"); // Or any other selector.

  if (target) {
    // Do something with `target`.
  }
});

이 예에서는 에서, close() 메소드는 클릭 이벤트가 #btnPrepend 요소 또는 그 하위 요소 내에서 발생했는지 확인하는 데 사용됩니다. 그렇다면 대상 변수는 클릭된 요소를 참조합니다.

jQuery Alternative

jQuery는 on()을 사용하여 이벤트 위임을 단순화합니다. method.

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`.
});

결론

이벤트 위임은 동적으로 생성된 요소에 이벤트 핸들러를 연결하는 안정적인 방법을 제공합니다. 이벤트 리스너를 상위 요소에 연결하면 나중에 대상 요소가 DOM에 추가되더라도 이벤트 핸들러가 트리거됩니다.

위 내용은 내 JavaScript 이벤트 리스너가 동적으로 생성된 요소에서 작동하지 않는 이유는 무엇이며 이벤트 위임을 사용하여 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!