DOM 요소에서 모든 이벤트 리스너를 제거하는 방법은 무엇입니까?

DOM 요소에서 이벤트 리스너 제거

질문:

DOM 요소에 연결된 모든 이벤트 리스너를 제거하는 것이 가능합니까? div와 같은 DOM 요소가 있습니까?

답변:

질문을 이해하시면 요구 사항에 따라 이를 달성하는 방법이 여러 가지가 있습니다.

모든 이벤트 핸들러 제거

유형에 관계없이 모든 이벤트 핸들러를 제거하려면 요소를 복제하고 복제된 요소로 바꾸면 됩니다.

var clone = element.cloneNode(true);

참고: 복제는 속성과 하위 항목을 유지하지만 DOM 속성 변경은 유지하지 않습니다.

특정 이벤트 유형 제거

익명 이벤트 핸들러

익명 이벤트 핸들러를 추가한 경우(기능적으로 addEventListener에 콜백으로 함수를 전달하는 것과 동일), RemoveEventListener에 문제가 발생합니다. 이는 익명 함수가 호출될 때마다 새 개체를 생성하여 구체적으로 제거하는 것이 불가능하기 때문입니다.

해결책:

1. 이벤트 핸들러 함수에서 함수를 직접 addEventListener에 전달합니다.
2. 반환된 함수에 대한 참조를 저장하는 addEventListener에 대한 래퍼 함수를 ​​만듭니다. 이벤트 리스너를 제거하려면 별도의 함수인 RemoveAllEvents가 필요합니다.

비익명 이벤트 핸들러

이벤트 핸들러가 비익명인 경우 예상대로 RemoveEventListener를 사용할 수 있습니다. 그러나 리스너를 추가하는 데 사용한 것과 동일한 객체 참조를 RemoveEventListener에 전달해야 합니다.

예:

function eventHandler() {}
div.addEventListener('click', eventHandler);
...
div.removeEventListener('click', eventHandler);

다음 사항에 유의하세요. 코드에서 요소를 자주 생성하고 제거하는 경우 메모리 누수를 방지하기 위해 이벤트 처리 래퍼 함수(제공된 예에서는 _eventHandlers)에 저장된 참조를 관리해야 할 수도 있습니다.

위 내용은 DOM 요소에서 모든 이벤트 리스너를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!