Comment puis-je supprimer les écouteurs d'événements des objets DOM en JavaScript ?

Suppression des écouteurs d'événements des objets DOM

Suppression de tous les gestionnaires d'événements

Pour supprimer tous les gestionnaires d'événements d'un objet, vous pouvez cloner l'élément et le remplacer avec le clone :

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

Cette méthode préserve les attributs et les enfants, mais pas les modifications des propriétés DOM.

Suppression des gestionnaires d'événements avec des fonctions anonymes

Vous pouvez supprimer l'événement gestionnaires avec des fonctions anonymes en stockant une référence à la fonction renvoyée et en créant une fonction distincte pour supprimer tous les événements :

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

Cela vous permet d'ajouter et de supprimer des écouteurs d'événements en utilisant :

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

Gestion directe des événements

Si vous utilisez une fonction anonyme pour gérer les événements, vous pouvez simplement l'ajouter et la supprimer directement :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!