Enlever l'écouteur d'événement en JavaScript

- Je ajouter un écouteur d'événement à un élément:

/* sitepoint.com/javascript-this-event-handlers */
function AttachEvent(element, type, handler){
    if (element.addEventListener){
        element.addEventListener(type, handler, false);
    }else{
        element.attachEvent("on"+type, handler);
    }
}

window.addEventListener("load", function() {
    var els = getElementsByClassName('name', 'img');
    var elsnum = els.length;
    if(elsnum) //found
    {
        var i = 0;
        for(i=0; i < elsnum; i++)
        {
            var the_els = els[i];
            AttachEvent(the_els, "click", myfunction); 
        }
    }
}, false);

Plus tard dans myfunction, je veux supprimer le gestionnaire de nouveau, pour empêcher la duplication des clics:

function myfunction(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;  

    //more code
    //...

    //remove click handler
    target.removeEventListener('click', e, false);

    //more code
    //...
}

L'écouteur d'événement n'est pas supprimé, bien que. Quand je clique sur un des éléments, le code de myfunction est exécutée à nouveau. Comment puis-je enlever l'écouteur d'événement pour empêcher l'élément cliqué d'être cliqué de nouveau?

PS: je n'utilise pas jQuery.

Si vous voulez une mise en œuvre facilitée, lire ma réponse en bas sur le fond. 😉

OriginalL'auteur reggie | 2012-01-12

  1. 8

    Je crois que vous y êtes presque, mais vous devez passer les auditeur à removeEventListener, et non l'événement lui-même. Donc, essayez:

    target.removeEventListener('click', myFunction, false);
    Ah, d'accord. Ce qui a résolu le problème en effet. Merci.
    Vous êtes les bienvenus! N'oublie pas de poignée c'est à dire avec element.detachEvent. En cas de doute, prendre un coup d'oeil un quirksmode lien @John posté, c'est un excellent article sur ce sujet.

    OriginalL'auteur bfavaretto

  2. 5

    Utilisation element.removeEventListener(type, listener, useCapture)
    N'oubliez pas de l'utiliser sur le même élément, et de lui donner exactement les mêmes paramètres que pour l'ajout d'.

    Un excellent moyen de code ce serait de faire une fonction qui stocke l'auditeur de détails dans une variable, imitant la façon dont setTimeout() œuvres, par exemple, et en ajoutant que pour l'élément prototype. Voici un exemple de fonction.

    HTMLElement.prototype.eventListener=
function(type, func, capture){
   if(typeof arguments[0]=="object"&&(!arguments[0].nodeType)){
      return this.removeEventListener.apply(this,arguments[0]);
   }
   this.addEventListener(type, func, capture);
   return arguments;
}

    Qui va ajouter une méthode à l'ensemble du HTML nœuds qui déjà peut accepter événement listners, et vous permettent de faire cela.

    var a=element.eventListener('click', myFunction, false); //to add
element.eventListener(a); //to remove

    OriginalL'auteur TERMtm

  3. 2

    http://www.quirksmode.org/js/events_advanced.html

    Pour supprimer un gestionnaire d'événement, utilisez la removeEventListener() méthode.

    Voir aussi http://help.dottoro.com/ljahxbsx.php

    object.removeEventListener (eventName, listener, useCapture);

    listener - Requis. Référence à la fonction de gestionnaire d'événement à supprimer. Vous avez besoin de transmettre ce que l'auditeur que vous souhaitez supprimer.

    OriginalL'auteur Luke Shaheen