Comment removeEventListener qui est la méthode addEventListener avec fonction anonyme?

function doSomethingWith(param)
{
    document.body.addEventListener(
        'scroll',
        function()
        {
            document.write(param);
        },
        false
    ); //An event that I want to remove later
}
setTimeout(
    function()
    {
        document.body.removeEventListener('scroll', HANDLER ,false);
            //What HANDLER should I specify to remove the anonymous handler above?
    },
    3000
);
doSomethingWith('Test. ');
InformationsquelleAutor Japboy | 2011-04-14
  1. 106

    Vous ne pouvez pas. Vous devez utiliser un nom de fonction ou de magasin de référence en quelque sorte.

    var handler;

function doSomethingWith(param) {
    handler = function(){
        document.write(param);
    };  
    document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
     document.body.removeEventListener('scroll', handler ,false);
}, 3000);

    Le mieux serait de le faire de manière structurée, de sorte que vous pouvez identifier les différents gestionnaires et les supprimer. Dans l'exemple ci-dessus, vous avez évidemment ne pouvait supprimer le dernier gestionnaire.

    Mise à jour:

    Vous pouvez créer votre propre gestionnaire gestionnaire (:)) :

    var Handler = (function(){
    var i = 1,
        listeners = {};

    return {
        addListener: function(element, event, handler, capture) {
            element.addEventListener(event, handler, capture);
            listeners[i] = {element: element, 
                             event: event, 
                             handler: handler, 
                             capture: capture};
            return i++;
        },
        removeListener: function(id) {
            if(id in listeners) {
                var h = listeners[id];
                h.element.removeEventListener(h.event, h.handler, h.capture);
                delete listeners[id];
            }
        }
    };
}());

    Ensuite, vous pouvez l'utiliser avec:

    function doSomethingWith(param) {
    return Handler.addListener(document.body, 'scroll', function() {
        document.write(param);
    }, false);
}

var handler = doSomethingWith('Test. ');

setTimeout(function() {
     Handler.removeListener(handler);
}, 3000);

    DÉMO

    • Pourriez-vous nous expliquer la manière structurée est? Mon anglais compétence n'est pas assez bon pour comprendre que... Merci.
    • Veuillez voir ma mise à jour.
    • Merci pour votre mise à jour. Ce serait utile!
    • Vous êtes les bienvenus 🙂 je viens de remarquer une petite erreur et il fixe.
    • Pourquoi voudriez-vous envelopper l'addListener et removeListener?
    • Entendez-vous l'auto-invocation de la fonction? Pour garder i et listeners "privé".
    • Merci de vous valueble mise à jour, Felix
    • Pouvez-vous mettre à jour les fonctions de sorte qu'il n'y a pas de fuite de mémoire? Ou au moins préciser qu'elle n'?
    • Fait. Permettez-moi de savoir si j'ai raté quelque chose.
    • wow génial solution

    InformationsquelleAutor Felix Kling
  2. 10

    Vous ne pouvez pas, vous avez besoin d'une référence à la fonction:

    function doSomethingWith(param) {
   var fn = function(){ document.write(param); };
   document.body.addEventListener('scroll', fn, false);
   setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000);
}
doSomethingWith('Test. ');
    • comment faire u pass objet d'événement?
    • fn = function(event){ document.écrire(param); };
    InformationsquelleAutor davin
  3. 4

    Vous pourriez aussi le faire comme ça:

    const ownAddEventListener = (scope, type, handler, capture) => {
  scope.addEventListener(type, handler, capture);
  return () => {
    scope.removeEventListener(type, handler, capture);    
  }
}

    Ensuite, vous pouvez retirer l'écouteur d'événement comme ceci:

    //Add event listener
const disposer = ownAddEventListener(document.body, 'scroll', () => { 
  //do something
}, false);

//Remove event listener
disposer();
    • Est-il possible de déterminer les événements qui ont été liés à l'objet de ce genre?
    • Vous pouvez simplement ajouter quelques propriétés de la fonction, comme le type, la portée, etc. const disposerFn = () => { scope.removeEventListener(type, handler, capture); } disposerFn.type = type; return disposerFn;
    InformationsquelleAutor Simon Jentsch