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

Comment supprimer tous les écouteurs d'événements d'un objet DOM dans Javascript/DOM

Introduction

Javascript fournit diverses méthodes pour ajout et suppression d'écouteurs d'événements aux objets DOM. Cependant, il peut être difficile de comprendre comment supprimer tous les écouteurs d'événements attachés à un objet.

Supprimer tous les gestionnaires d'événements

Pour supprimer tous les gestionnaires d'événements de n'importe quel objet, vous pouvez utiliser l'approche suivante :

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

Cette méthode préserve les attributs et les enfants, mais elle ne préserve aucune modification des propriétés DOM.

Supprimer les gestionnaires d'événements anonymes pour un événement spécifique Types

Des gestionnaires d'événements anonymes sont créés lorsqu'une fonction est utilisée comme rappel lors de l'enregistrement de l'écouteur d'événement sans attribuer de nom à la fonction. Ces gestionnaires ne peuvent pas être supprimés à l'aide de removeEventListener().

Pour gérer ce scénario, vous pouvez soit :

1. Utiliser la fonction directement au lieu de renvoyer une fonction :

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

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

2. Créez une fonction wrapper qui stocke une référence à la fonction anonyme et utilisez-la avec les fonctions personnalisées addEventListener() et 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>

Utilisation

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

Remarque :

Assurez-vous de supprimer les références au gestionnaire d'événements de la variable globale _eventHandlers lors de la destruction d'objets pour éviter les fuites de mémoire.

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!