동적으로 생성된 요소에서 이벤트 처리
웹 개발 영역에서 동적으로 생성된 요소에서 이벤트를 처리하는 것은 어려울 수 있습니다. 이 문서에서는 초기 페이지 로드 후 생성된 요소에 의해 트리거되는 이벤트 캡처 문제를 다룹니다.
문제
해결책
이 문제를 해결하는 열쇠는 이벤트 위임에 있습니다. 이벤트 위임에는 동적으로 생성된 콘텐츠의 정적 상위 요소에 이벤트 핸들러를 바인딩하는 작업이 포함됩니다. 이를 통해 이벤트가 정적 조상까지 버블링되어 초기 페이지 로드 이후에 생성된 요소에 대해서도 처리될 수 있습니다.
jQuery는 이벤트 위임을 위한 두 가지 메서드인 .on() 및 .delegate( ). 버전 1.7 이상의 경우 권장 방법은 .on():
$('#modal').on('keyup', 'input', function() {
// Handle the event
});버전 1.6 이하의 경우 .delegate()를 사용합니다.
$('#modal').delegate('input', 'keyup', function() {
// Handle the event
});이 예제에서 이벤트 핸들러는 모달 요소에 바인딩됩니다. 모달 내의 입력 요소를 클릭하면 이벤트가 모달까지 버블링되므로 이벤트 핸들러가 트리거됩니다.
위 내용은 JavaScript에서 동적으로 생성된 요소의 이벤트를 어떻게 처리할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
