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

Javascript/DOM: DOM 개체에서 모든 이벤트 핸들러 제거

질문:

어떻게 모두 완전히 제거할 수 있습니까? div와 같은 DOM 객체와 관련된 이벤트가 있습니까?

문제 설명:

귀하의 경우 사용자 정의와 함께 addEventListener를 사용하여 div에 이벤트를 추가하고 있습니다. 래퍼 함수를 ​​반환하는 함수, eventReturner(). 이렇게 하면 매번 고유한 이벤트 리스너가 생성됩니다.

해결책:

DOM 객체에서 모든 이벤트 핸들러를 제거하는 데는 두 가지 주요 접근 방식이 있습니다.

1 . 요소 복제

이 접근 방식은 속성과 하위 요소를 유지하지만 DOM 속성에 대한 변경 사항은 유지하지 않습니다.

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

2. 특정 이벤트 핸들러 제거

익명 이벤트 핸들러:

이벤트 핸들러로 사용되는 익명 함수는 새 리스너를 반복적으로 생성합니다. RemoveEventListener는 이에 영향을 미치지 않습니다. 이 문제를 해결하려면:

• 래핑하지 않고 직접 함수 핸들러를 사용하세요.
• 반환된 함수를 추적하고 RemoveAllEvents를 지원하는 addEventListener에 대한 래퍼 함수를 ​​만듭니다.

예제 래퍼:

<code class="javascript">var _eventHandlers = {}; // Global reference

const addListener = (node, event, handler, capture = false) => {
  if (!(event in _eventHandlers)) {
    _eventHandlers[event] = [];
  }
  _eventHandlers[event].push({ node, handler, capture });
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event] = _eventHandlers[event].filter(({ node }) => node !== targetNode);
  targetNode.removeEventListener(event, handler, capture);
};</code>

사용법:

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

// To remove the event listeners:
removeAllListeners(div, 'click');</code>

참고: 코드가 기간이 연장되고 많은 요소를 생성하고 제거하는 작업이 포함되므로 _eventHandlers에서 해당 요소에 대한 참조를 모두 제거하세요.

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