J'ai un objet qui contient des méthodes. Ces méthodes sont placées dans l'objet à l'intérieur d'une fonction anonyme. Cela ressemble à ceci:

var t = {};
window.document.addEventListener("keydown", function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
});  

(il y a beaucoup plus de code, mais cela suffit pour montrer le problème)

Maintenant, je veux arrêter l'écouteur d'événements dans certains cas. Par conséquent, j'essaie de faire un removeEventListener mais je ne peux pas comprendre comment faire cela. J'ai lu dans d'autres questions qu'il n'est pas possible d'appeler removeEventListener sur des fonctions anonymes, mais est-ce également le cas dans cette situation?

J'ai créé une méthode dans la fonction anonyme et j'ai donc pensé que c'était possible. Ressemble à ça:

t.disable = function() {
    window.document.removeEventListener("keydown", this, false);
}

Pourquoi je ne peux pas faire ça?

Y a-t-il une autre (bonne) façon de faire cela?

Info bonus; cela ne doit fonctionner que dans Safari, d'où le support IE manquant.

Je crois que c'est le but d'une fonction anonyme, il lui manque un nom ou un moyen de la référencer.

Si j'étais vous, je créerais simplement une fonction nommée, ou je la mettrais dans une variable pour que vous y fassiez référence.

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

Vous pouvez ensuite le supprimer en

window.document.removeEventListener("keydown", handler);   

si vous êtes dans la fonction réelle, vous pouvez utiliser arguments.callee comme référence à la fonction. un péché:

button.addEventListener('click', function() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', arguments.callee);
});

EDIT: Cela ne fonctionnera pas si vous travaillez en mode strict ( "use strict";)

Une version de la solution d' Otto Nascarella qui fonctionne en mode strict est:

button.addEventListener('click', function handler() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', handler);
});

window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));  

Peut être plusieurs fonctions anonymes, keydown 1

Attention: ne fonctionne que dans Chrome Dev Tools& ne peut pas être utilisé dans code : link

dans les navigateurs modernes, vous pouvez effectuer les opérations suivantes ...

button.addEventListener( 'click', () => {
    alert( 'only once!' );
}, { once: true } );

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Une option pas si anonyme

element.funky = function() {
    console.log("Click!");
};
element.funky.type = "click";
element.funky.capt = false;
element.addEventListener(element.funky.type, element.funky, element.funky.capt);
// blah blah blah
element.removeEventListener(element.funky.type, element.funky, element.funky.capt);

Depuis que j'ai reçu des commentaires d'Andy ( tout à fait raison, mais comme pour de nombreux exemples, je souhaitais montrer une expansion contextuelle de l'idée ), voici une exposition moins compliquée :

<script id="konami" type="text/javascript" async>
    var konami = {
        ptrn: "38,38,40,40,37,39,37,39,66,65",
        kl: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
    };
    document.body.addEventListener( "keyup", function knm ( evt ) {
        konami.kl = konami.kl.slice( -9 );
        konami.kl.push( evt.keyCode );
        if ( konami.ptrn === konami.kl.join() ) {
            evt.target.removeEventListener( "keyup", knm, false );

            /* Although at this point we wish to remove a listener
               we could easily have had multiple "keyup" listeners
               each triggering different functions, so we MUST
               say which function we no longer wish to trigger
               rather than which listener we wish to remove.

               Normal scoping will apply to where we can mention this function
               and thus, where we can remove the listener set to trigger it. */

            document.body.classList.add( "konami" );
        }
    }, false );
    document.body.removeChild( document.getElementById( "konami" ) );
</script>

Cela permet une structure de fonction effectivement anonyme, évite l'utilisation de l' appelé pratiquement obsolète et permet une suppression facile.

Incidemment : la suppression de l'élément de script immédiatement après avoir défini l'auditeur est une astuce mignonne pour cacher du code que l'on préférerait ne pas être tout à fait évident pour les regards indiscrets ( cela gâcherait la surprise ;-)

Donc la méthode ( plus simplement ) est:

element.addEventListener( action, function name () {
    doSomething();
    element.removeEventListener( action, name, capture );
}, capture );

Ce n'est pas idéal car cela supprime tout, mais pourrait fonctionner pour vos besoins:

z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);

Le clonage d'un nœud copie tous ses attributs et leurs valeurs, y compris les écouteurs intrinsèques (en ligne). Il ne copie pas les écouteurs d'événements ajoutés à l'aide de addEventListener ()

Node.cloneNode ()

JavaScript : la méthode addEventListener enregistre l'écouteur spécifié sur l'objet EventTarget (élément | document | fenêtre) sur lequel il est appelé.

EventTarget. addEventListener ( event_type , handler_function, Bubbling | Capture );

Evénements souris, clavier Exemple de test dans WebConsole:

var keyboard = function(e) {
    console.log('Key_Down Code : ' + e.keyCode);
};
var mouseSimple = function(e) {
    var element = e.srcElement || e.target;
    var tagName = element.tagName || element.relatedTarget;
    console.log('Mouse Over TagName : ' + tagName);    
};
var  mouseComplex = function(e) {
    console.log('Mouse Click Code : ' + e.button);
} 

window.document.addEventListener('keydown',   keyboard,      false);
window.document.addEventListener('mouseover', mouseSimple,   false);
window.document.addEventListener('click',     mouseComplex,  false);

removeEventListener supprime l'écouteur d'événements précédemment enregistré avec EventTarget.addEventListener ().

window.document.removeEventListener('keydown',   keyboard,     false);
window.document.removeEventListener('mouseover', mouseSimple,  false);
window.document.removeEventListener('click',     mouseComplex, false);

puis-je utiliser

Pour donner une approche plus à jour à cela:

//one-time fire
element.addEventListener('mousedown', {
  handleEvent: function (evt) {
    element.removeEventListener(evt.type, this, false);
  }
}, false);

Je suis tombé sur le même problème et c'était la meilleure solution que je pouvais obtenir:

/*Adding the event listener (the 'mousemove' event, in this specific case)*/
element.onmousemove = function(event) {
    /*do your stuff*/
};
/*Removing the event listener*/
element.onmousemove = null;

Gardez à l'esprit que je n'ai testé cela que pour l' windowélément et pour l' 'mousemove'événement, donc il pourrait y avoir des problèmes avec cette approche.

Peut-être pas la meilleure solution en termes de ce que vous demandez. Je n'ai toujours pas déterminé de méthode efficace pour supprimer la fonction anonyme déclarée en ligne avec l'invocation de l'écouteur d'événements.

J'utilise personnellement une variable pour stocker <target>et déclarer la fonction en dehors de l'appel de l'écouteur d'événements, par exemple:

const target = document.querySelector('<identifier>');

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

Ensuite, pour supprimer l'auditeur:

target.removeEventListener('click', myFunc);

Ce n'est pas la principale recommandation que vous recevrez, mais pour supprimer les fonctions anonymes, la seule solution que j'ai trouvée utile est de supprimer puis de remplacer l'élément HTML. Je suis sûr qu'il doit y avoir une meilleure méthode JS vanille mais je ne l'ai pas encore vue.

Je sais que c'est un fil assez ancien, mais j'ai pensé que je pourrais mettre mes deux cents pour ceux qui le trouvent utile.

Le script (excuses pour les noms de méthodes non créatives):

window.Listener = {
    _Active: [],
    remove: function(attached, on, callback, capture){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            if(current[0] === attached && current[1] === on && current[2] === callback){
                attached.removeEventListener(on, callback, (capture || false));
                return this._Active.splice(i, 1);
            }
        }
    }, removeAtIndex(i){
        if(this._Active[i]){
            var remove = this._Active[i];
            var attached = remove[0], on = remove[1], callback = remove[2];
            attached.removeEventListener(on, callback, false);
            return this._Active.splice(i, 1);
        }
    }, purge: function(){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            current[0].removeEventListener(current[1], current[2]);
            this._Active.splice(i, 1);
        }
    }, declare: function(attached, on, callback, capture){
        attached.addEventListener(on, callback, (capture || false));
        if(this._Active.push([attached, on, callback])){
            return this._Active.length - 1;
        }
    }
};

Et vous pouvez l'utiliser comme ceci:

// declare a new onclick listener attached to the document
var clickListener = Listener.declare(document, "click" function(e){
    // on click, remove the listener and log the clicked element
    console.log(e.target);
    Listener.removeAtIndex(clickListener);
});

// completely remove all active listeners 
// (at least, ones declared via the Listener object)
Listener.purge();

// works exactly like removeEventListener
Listener.remove(element, on, callback);

window.document.onkeydown = function(){};