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

Juste question: existe-t-il un moyen de supprimer complètement tous les événements d'un objet, par exemple un div?

EDIT: J'ajoute par div.addEventListener('click',eventReturner(),false);événement.

function eventReturner() {
    return function() {
        dosomething();
    };
}

EDIT2: j'ai trouvé un moyen, qui fonctionne, mais pas possible d'utiliser pour mon cas:

var returnedFunction;
function addit() {
    var div = document.getElementById('div');
    returnedFunction = eventReturner();
    div.addEventListener('click',returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it would change, if the function was called again.
}
function removeit() {
    var div = document.getElementById('div');
    div.removeEventListener('click',returnedFunction,false);
}

Je ne suis pas sûr de ce que vous entendez par supprimer tous les événements . Supprimer tous les gestionnaires pour un type spécifique d'événement ou tous les gestionnaires d'événements pour un type?

Supprimer tous les gestionnaires d'événements

Si vous souhaitez supprimer tous les gestionnaires d'événements (de tout type), vous pouvez cloner l'élément et le remplacer par son clone:

var clone = element.cloneNode(true);

Remarque: Cela conservera les attributs et les enfants, mais ne conservera aucune modification des propriétés DOM.

Supprimer les gestionnaires d'événements "anonymes" d'un type spécifique

L'autre façon est d'utiliser removeEventListener()mais je suppose que vous avez déjà essayé cela et cela n'a pas fonctionné. Voici le hic :

L'appel addEventListenerà une fonction anonyme crée un nouvel auditeur à chaque fois. L'appel removeEventListenerà une fonction anonyme n'a aucun effet . Une fonction anonyme crée un objet unique à chaque fois qu'elle est appelée, ce n'est pas une référence à un objet existant bien qu'elle puisse en appeler un. Lors de l'ajout d'un écouteur d'événements de cette manière, assurez-vous qu'il n'est ajouté qu'une seule fois, il est permanent (ne peut pas être supprimé) jusqu'à ce que l'objet auquel il a été ajouté soit détruit.

Vous passez essentiellement une fonction anonyme en addEventListenertant que eventReturnerretourne une fonction.

Vous avez deux possibilités pour résoudre ce problème:

1. N'utilisez pas une fonction qui renvoie une fonction. Utilisez la fonction directement:

   function handler() {
       dosomething();
   }
   
   div.addEventListener('click',handler,false);
   

2. Créez un wrapper pour addEventListenerqui stocke une référence à la fonction retournée et créez une removeAllEventsfonction étrange :

   var _eventHandlers = {}; // somewhere global
   
   const addListener = (node, event, handler, capture = false) => {
     if (!(event in _eventHandlers)) {
       _eventHandlers[event] = []
     }
     // here we track the events and their nodes (note that we cannot
     // use node as Object keys, as they'd get coerced into a string
     _eventHandlers[event].push({ node: node, handler: handler, capture: capture })
     node.addEventListener(event, handler, capture)
   }
   
   const removeAllListeners = (targetNode, event) => {
     // remove listeners from the matching nodes
     _eventHandlers[event]
       .filter(({ node }) => node === targetNode)
       .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))
   
     // update _eventHandlers global
     _eventHandlers[event] = _eventHandlers[event].filter(
       ({ node }) => node !== targetNode,
     )
   }
   

   Et puis vous pouvez l'utiliser avec:

   addListener(div, 'click', eventReturner(), false)
   // and later
   removeAllListeners(div, 'click')
   

DEMO

Remarque: Si votre code s'exécute pendant une longue période et que vous créez et supprimez de nombreux éléments, vous devez vous assurer de supprimer les éléments contenus dans _eventHandlerslorsque vous les détruisez.

Cela supprimera tous les auditeurs des enfants mais sera lent pour les grandes pages. Brutalement simple à écrire.

element.outerHTML = element.outerHTML;

Utilisez la propre fonction de l'écouteur d'événements remove(). Par exemple:

getEventListeners().click.forEach((e)=>{e.remove()})

Comme le dit corwin.amber, il existe des différences entre Webkit et d'autres.

Dans Chrome:

getEventListeners(document);

Ce qui vous donne un objet avec tous les écouteurs d'événements existants:

Object 
 click: Array[1]
 closePopups: Array[1]
 keyup: Array[1]
 mouseout: Array[1]
 mouseover: Array[1]
 ...

De là, vous pouvez atteindre l'auditeur que vous souhaitez supprimer:

getEventListeners(document).copy[0].remove();

Donc, tous les écouteurs d'événements:

for(var eventType in getEventListeners(document)) {
   getEventListeners(document)[eventType].forEach(
      function(o) { o.remove(); }
   ) 
}

Dans Firefox

Est un peu différent car il utilise un wrapper d'écoute qui ne contient aucune fonction de suppression. Vous devez obtenir l'auditeur que vous souhaitez supprimer:

document.removeEventListener("copy", getEventListeners(document).copy[0].listener)

Tous les écouteurs d'événements:

for(var eventType in getEventListeners(document)) {
  getEventListeners(document)[eventType].forEach(
    function(o) { document.removeEventListener(eventType, o.listener) }
  ) 
}

Je suis tombé sur ce post en essayant de désactiver la protection contre la copie ennuyeuse d'un site Web d'actualités.

Prendre plaisir!

Vous pouvez ajouter une fonction de crochet pour intercepter tous les appels addEventHandler. Le hook poussera le gestionnaire vers une liste qui peut être utilisée pour le nettoyage. Par exemple,

if (EventTarget.prototype.original_addEventListener == null) {
    EventTarget.prototype.original_addEventListener = EventTarget.prototype.addEventListener;

    function addEventListener_hook(typ, fn, opt) {
        console.log('--- add event listener',this.nodeName,typ);
        this.all_handlers = this.all_handlers || [];
        this.all_handlers.push({typ,fn,opt});
        this.original_addEventListener(typ, fn, opt);  
    }

    EventTarget.prototype.addEventListener = addEventListener_hook;
}

Vous devez insérer ce code en haut de votre page Web principale (par exemple index.html). Pendant le nettoyage, vous pouvez parcourir all_handlers et appeler removeEventHandler pour chacun. Ne vous inquiétez pas d'appeler plusieurs fois removeEventHandler avec la même fonction. C'est inoffensif.

Par exemple,

function cleanup(elem) {
    for (let t in elem) if (t.startsWith('on') && elem[t] != null) {
        elem[t] = null;
        console.log('cleanup removed listener from '+elem.nodeName,t);
    } 
    for (let t of elem.all_handlers || []) {
        elem.removeEventListener(t.typ, t.fn, t.opt);
        console.log('cleanup removed listener from '+elem.nodeName,t.typ);
    } 
}

Remarque: pour IE, utilisez Element au lieu d'EventTarget, et changez => en fonction, et diverses autres choses.

Pour compléter les réponses, voici des exemples concrets de suppression d'événements lorsque vous visitez des sites Web et que vous n'avez pas de contrôle sur le code HTML et JavaScript généré.

Certains sites Web ennuyeux vous empêchent de copier-coller les noms d'utilisateur sur les formulaires de connexion, ce qui pourrait facilement être contourné si l' onpasteévénement était ajouté avec l' onpaste="return false"attribut HTML. Dans ce cas, il suffit de faire un clic droit sur le champ de saisie, de sélectionner «Inspecter l'élément» dans un navigateur comme Firefox et de supprimer l'attribut HTML.

Cependant, si l'événement a été ajouté via JavaScript comme ceci:

document.getElementById("lyca_login_mobile_no").onpaste = function(){return false};

Nous devrons également supprimer l'événement via JavaScript:

document.getElementById("lyca_login_mobile_no").onpaste = null;

Dans mon exemple, j'ai utilisé l'ID "lyca_login_mobile_no" car il s'agissait de l'ID d'entrée de texte utilisé par le site Web que je visitais.

Une autre façon de supprimer l'événement (qui supprimera également tous les événements) est de supprimer le nœud et d'en créer un nouveau, comme nous devons le faire si a addEventListenerété utilisé pour ajouter des événements à l'aide d'une fonction anonyme que nous ne pouvons pas supprimer avec removeEventListener. Cela peut également être fait via la console du navigateur en inspectant un élément, en copiant le code HTML, en supprimant le code HTML, puis en collant le code HTML au même endroit.

Cela peut également être fait plus rapidement et automatisé via JavaScript:

var oldNode = document.getElementById("lyca_login_mobile_no");
var newNode = oldNode.cloneNode(true);
oldNode.parentNode.insertBefore(newNode, oldNode);
oldNode.parentNode.removeChild(oldNode);

Mise à jour: si l'application Web est créée à l'aide d'un framework JavaScript comme Angular, il semble que les solutions précédentes ne fonctionnent pas ou ne cassent pas l'application. Une autre solution de contournement pour autoriser le collage consiste à définir la valeur via JavaScript:

document.getElementById("lyca_login_mobile_no").value = "username";

Pour le moment, je ne sais pas s'il existe un moyen de supprimer tous les événements de validation et de restriction de formulaire sans casser une application entièrement écrite en JavaScript comme Angular.

angular a un polyfill pour ce problème, vous pouvez vérifier. Je n'ai pas beaucoup compris mais peut-être que cela peut aider.

const REMOVE_ALL_LISTENERS_EVENT_LISTENER = 'removeAllListeners';

    proto[REMOVE_ALL_LISTENERS_EVENT_LISTENER] = function () {
        const target = this || _global;
        const eventName = arguments[0];
        if (!eventName) {
            const keys = Object.keys(target);
            for (let i = 0; i < keys.length; i++) {
                const prop = keys[i];
                const match = EVENT_NAME_SYMBOL_REGX.exec(prop);
                let evtName = match && match[1];
                // in nodejs EventEmitter, removeListener event is
                // used for monitoring the removeListener call,
                // so just keep removeListener eventListener until
                // all other eventListeners are removed
                if (evtName && evtName !== 'removeListener') {
                    this[REMOVE_ALL_LISTENERS_EVENT_LISTENER].call(this, evtName);
                }
            }
            // remove removeListener listener finally
            this[REMOVE_ALL_LISTENERS_EVENT_LISTENER].call(this, 'removeListener');
        }
        else {
            const symbolEventNames = zoneSymbolEventNames$1[eventName];
            if (symbolEventNames) {
                const symbolEventName = symbolEventNames[FALSE_STR];
                const symbolCaptureEventName = symbolEventNames[TRUE_STR];
                const tasks = target[symbolEventName];
                const captureTasks = target[symbolCaptureEventName];
                if (tasks) {
                    const removeTasks = tasks.slice();
                    for (let i = 0; i < removeTasks.length; i++) {
                        const task = removeTasks[i];
                        let delegate = task.originalDelegate ? task.originalDelegate : task.callback;
                        this[REMOVE_EVENT_LISTENER].call(this, eventName, delegate, task.options);
                    }
                }
                if (captureTasks) {
                    const removeTasks = captureTasks.slice();
                    for (let i = 0; i < removeTasks.length; i++) {
                        const task = removeTasks[i];
                        let delegate = task.originalDelegate ? task.originalDelegate : task.callback;
                        this[REMOVE_EVENT_LISTENER].call(this, eventName, delegate, task.options);
                    }
                }
            }
        }
        if (returnTarget) {
            return this;
        }
    };

....

Vous pouvez ajouter une fonction d'assistance qui efface l'écouteur d'événements par exemple

function clearEventListener(element) {
 const clonedElement = element.cloneNode(true);
element.replaceWith(clonedElement);
return clonedElement;
}

il suffit de passer l'élément à la fonction et c'est tout ...

var div = getElementsByTagName('div')[0]; /* first div found; you can use getElementById for more specific element */
div.onclick = null; // OR:
div.onclick = function(){};

//Éditer

Je ne savais pas quelle méthode utilisez-vous pour attacher des événements. Car addEventListenervous pouvez utiliser ceci:

div.removeEventListener('click',functionName,false); // functionName is the name of your callback function

plus de détails

Peut-être que le navigateur le fera pour vous si vous faites quelque chose comme:

Copiez le divet ses attributs et insérez-le avant l'ancien, puis déplacez le contenu de l'ancien vers le nouveau et supprimez l'ancien?

Suppression de tous les événements sur document :

Bon mot:

for (key in getEventListeners(document)) { getEventListeners(document)[key].forEach(function(c) { c.remove() }) }

Jolie version:

for (key in getEventListeners(document)) {
  getEventListeners(document)[key].forEach(function(c) {
    c.remove()
  })   
}

Chrome uniquement

Comme j'essaie de supprimer un EventListener dans un test Protractor et que je n'ai pas accès à l'écouteur dans le test, ce qui suit fonctionne pour supprimer tous les écouteurs d'événements d'un seul type:

function(eventType){
    getEventListeners(window).[eventType].forEach(
        function(e){
            window.removeEventListener(eventType, e.listener)
        }
    );
}

J'espère que cela aide quelqu'un car la réponse précédente utilisait la méthode "supprimer" qui depuis lors ne fonctionne plus.

Une méthode consiste à ajouter un nouvel écouteur d'événements qui appelle e.stopImmediatePropagation ().