JavaScript의 DOM 개체에서 모든 이벤트 리스너를 제거하는 방법: 종합 안내서

Javascript/DOM: DOM 개체에서 모든 이벤트 리스너를 제거하는 방법

질문이 생깁니다. DOM 개체에서 모든 이벤트를 어떻게 완전히 제거할 수 있습니까? div와 같은 객체인가요? 특히 쿼리는 per div.addEventListener('click', eventReturner(), false);.

모든 이벤트 핸들러 제거

를 사용하여 추가된 이벤트와 관련이 있습니다. 요소에서 유형에 관계없이 모든 이벤트 핸들러를 제거하려는 경우 다음 방법을 고려하십시오.

var clone = element.cloneNode(true);

이 기술은 DOM 속성 수정에 영향을 주지 않고 속성과 하위 항목을 보존합니다.

특정 유형의 익명 이벤트 핸들러 제거

또 다른 접근 방식은 RemoveEventListener() 메서드를 활용하는 것이지만 익명 함수를 처리할 때는 작동하지 않을 수 있습니다. 여기서 중요한 문제는 익명 함수로 addEventListener를 호출하면 함수가 호출될 때마다 고유한 리스너가 할당된다는 것입니다. 결과적으로, 동일한 함수 참조를 사용하여 이벤트 핸들러를 제거해도 아무런 효과가 없습니다.

이 제한 사항을 해결하려면 다음 두 가지 대안을 고려하십시오.

1. 명명된 함수 사용:

function handler() {
     dosomething();
 }

 div.addEventListener('click',handler,false);

2. 래퍼 함수 만들기:

var _eventHandlers = {}; // somewhere global

const addListener = (node, event, handler, capture = false) => {
   if (!(event in _eventHandlers)) {
     _eventHandlers[event] = []
   }
   _eventHandlers[event].push({ node: node, handler: handler, capture: capture })
   node.addEventListener(event, handler, capture)
 }
...
addListener(div, 'click', eventReturner(), false)

이 접근 방식을 사용하면 래퍼를 만들 수 있습니다. 추가된 이벤트 리스너에 대한 참조를 저장하는 함수입니다. 그런 다음 해당 RemoveAllListeners 함수를 사용하여 이러한 핸들러를 제거할 수 있습니다.

위 내용은 JavaScript의 DOM 개체에서 모든 이벤트 리스너를 제거하는 방법: 종합 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!