Comment supprimer tous les écouteurs d'événements d'un objet DOM en JavaScript : un guide complet

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

La question se pose : comment supprimer complètement tous les événements de un objet, comme un div ? En particulier, la requête concerne un événement ajouté à l'aide de per div.addEventListener('click', eventReturner(), false);.

Suppression de tous les gestionnaires d'événements

Si l'intention est d'éliminer tous les gestionnaires d'événements (quel que soit leur type) d'un élément, envisagez la méthode suivante :

var clone = element.cloneNode(true);

Cette technique préserve les attributs et les enfants sans affecter les modifications des propriétés DOM.

Suppression des gestionnaires d'événements anonymes d'un type spécifique

L'approche alternative consiste à utiliser la méthode removeEventListener(), mais elle peut ne pas fonctionner lorsqu'il s'agit de fonctions anonymes. Le problème clé ici est que l'appel de addEventListener avec une fonction anonyme attribue un écouteur unique à chaque fois que la fonction est invoquée. Par conséquent, tenter de supprimer le gestionnaire d'événements en utilisant la même référence de fonction n'a aucun effet.

Pour résoudre cette limitation, envisagez ces deux alternatives :

1. Utiliser une fonction nommée :

function handler() {
     dosomething();
 }

 div.addEventListener('click',handler,false);

2. Créer une fonction Wrapper :

var _eventHandlers = {}; // somewhere global

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)
 }
...
addListener(div, 'click', eventReturner(), false)

Cette approche permet de créer un wrapper fonction qui stocke une référence à l’écouteur d’événement ajouté. La fonction RemoveAllListeners correspondante peut ensuite être utilisée pour supprimer ces gestionnaires.

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!