JavaScript에서 동적으로 생성된 요소에 이벤트 리스너를 연결하는 방법은 무엇입니까?

JavaScript에서 동적으로 생성된 요소에 이벤트 연결

동적으로 생성된 목록에 동적 요소를 추가하고 이벤트 리스너를 동적으로 생성된 요소의 경우 이벤트가 실행되지 않을 수 있습니다. 이는 이벤트 리스너가 연결되는 시점에 요소를 사용할 수 없기 때문입니다.

이 문제를 해결하기 위해 이벤트 위임을 사용할 수 있습니다. 이 기술에는 동적으로 생성된 요소가 포함된 상위 수준 요소에 이벤트 리스너를 연결하는 작업이 포함됩니다.

예를 들어 다음 코드를 고려하세요.

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

  if (target) {
    // Do something with 'target'
  }
});

이 예에서 이벤트 리스너는 다음과 같습니다. 문서 객체에 첨부되어 클릭 이벤트를 수신합니다. close() 함수는 클릭 이벤트가 선택기 #btnPrepend(또는 다른 정의된 선택기)가 있는 요소에서 발생했는지 확인하는 데 사용됩니다. 일치하는 항목이 발견되면 그에 따라 이벤트가 처리됩니다.

또는 jQuery는 이벤트 위임에 대한 단순화된 접근 방식을 제공합니다.

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

이 방법은 이벤트 리스너를 문서 개체에 연결하여 수신합니다. #btnPrepend 선택기가 있는 요소에 대한 클릭 이벤트의 경우

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