Comment supprimer tous les gestionnaires d'événements d'un objet DOM en JavaScript ?

Javascript/DOM : éliminer tous les gestionnaires d'événements d'un objet DOM

Question :

Comment pouvons-nous supprimer complètement tous événements associés à un objet DOM, tel qu'un div ?

Élaboration du problème :

Dans votre cas, vous ajoutez des événements à un div en utilisant addEventListener avec un fonction, eventReturner(), qui renvoie une fonction wrapper. Cela crée des écouteurs d'événements uniques à chaque fois.

Solution :

Il existe deux approches principales pour supprimer tous les gestionnaires d'événements d'un objet DOM :

1 . Clonage de l'élément

Cette approche préserve les attributs et les enfants mais ne conserve aucune modification des propriétés DOM.

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

2. Suppression de gestionnaires d'événements spécifiques

Gestionnaires d'événements anonymes :

Les fonctions anonymes utilisées comme gestionnaires d'événements créent de nouveaux écouteurs à plusieurs reprises. RemoveEventListener n’a aucun effet sur eux. Pour résoudre ce problème :

• Utilisez le gestionnaire de fonctions directement sans l'envelopper.
• Créez une fonction wrapper pour addEventListener qui suit les fonctions renvoyées et prend en charge RemoveAllEvents.

Exemple de wrapper :

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

Utilisation :

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

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

Remarque : Si votre code s'exécute pendant un période prolongée et implique la création et la suppression de nombreux éléments, assurez-vous de supprimer toute référence à ces éléments de _eventHandlers.

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!