JavaScript의 DOM 개체에서 이벤트 리스너를 어떻게 제거할 수 있습니까?

DOM 객체에서 이벤트 리스너 제거

모든 이벤트 핸들러 제거

객체에서 모든 이벤트 핸들러를 제거하려면 요소를 복제하고 교체할 수 있습니다.

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

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

익명 함수로 이벤트 핸들러 제거

이벤트를 제거할 수 있습니다. 반환된 함수에 대한 참조를 저장하고 모든 이벤트를 제거하는 별도의 함수를 생성하여 익명 함수가 있는 핸들러:

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

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)
}

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event]
    .filter(({ node }) => node === targetNode)
    .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))

  _eventHandlers[event] = _eventHandlers[event].filter(
    ({ node }) => node !== targetNode,
  )
}</code>

이렇게 하면 다음을 사용하여 이벤트 리스너를 추가하고 제거할 수 있습니다.

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

직접 이벤트 처리

익명 함수를 사용하여 이벤트를 처리하는 경우 간단히 직접 추가하고 제거할 수 있습니다.

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

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

위 내용은 JavaScript의 DOM 개체에서 이벤트 리스너를 어떻게 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!