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

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

소개

Javascript는 DOM 개체에 대한 다양한 방법을 제공합니다. DOM 객체에 이벤트 리스너를 추가하고 제거합니다. 그러나 객체에 연결된 모든 이벤트 리스너를 제거하는 방법을 이해하는 것은 어려울 수 있습니다.

모든 이벤트 핸들러 제거

객체에서 모든 이벤트 핸들러를 제거하려면, 다음 접근 방식을 사용할 수 있습니다.

<code class="javascript">const clone = element.cloneNode(true);</code>

이 방법은 속성과 하위 항목을 유지하지만 DOM 속성의 변경 사항은 유지하지 않습니다.

특정 이벤트에 대한 익명 이벤트 핸들러 제거 유형

함수에 이름을 할당하지 않고 이벤트 리스너 등록 중에 함수를 콜백으로 사용하면 익명 이벤트 핸들러가 생성됩니다. 이러한 핸들러는 RemoveEventListener()를 사용하여 제거할 수 없습니다.

이 시나리오를 처리하려면 다음 중 하나를 수행하세요.

1. 함수를 반환하는 대신 함수를 직접 사용하세요.

<code class="javascript">function handler() {
  dosomething();
}

div.addEventListener('click', handler, false);</code>

2. 익명 함수에 대한 참조를 저장하는 래퍼 함수를 ​​만들고 이를 사용자 정의 addEventListener() 및 RemoveAllListeners() 함수와 함께 사용합니다.

<code class="javascript">const addListener = (node, event, handler, capture = false) => {
  // Store references to handlers and nodes
  // ...
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  // Remove listeners from specified nodes
  // ...
};</code>

사용법

<code class="javascript">addListener(div, 'click', eventReturner(), false);
// ...
removeAllListeners(div, 'click');</code>

참고:

객체를 삭제할 때 메모리 누수를 방지하려면 _eventHandlers 전역 변수에서 이벤트 핸들러 참조를 제거해야 합니다.

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