Tengo un objeto que tiene métodos. Estos métodos se colocan en el objeto dentro de una función anónima. Se parece a esto:

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);
    };
});  

(hay mucho más código, pero esto es suficiente para mostrar el problema)

Ahora quiero detener el detector de eventos en algunos casos. Por lo tanto, estoy tratando de hacer un removeEventListener pero no puedo averiguar cómo hacerlo. He leído en otras preguntas que no es posible llamar a removeEventListener en funciones anónimas, pero ¿es este también el caso en esta situación?

Tengo un método creado dentro de la función anónima y, por lo tanto, pensé que era posible. Se ve como esto:

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

¿Por qué no puedo hacer esto?

¿Hay alguna otra (buena) forma de hacer esto?

Información adicional; esto solo tiene que funcionar en Safari, de ahí la falta de compatibilidad con IE.

Creo que ese es el objetivo de una función anónima, carece de un nombre o una forma de referenciarla.

Si yo fuera usted, simplemente crearía una función con nombre o la pondría en una variable para que tenga una referencia a ella.

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);

A continuación, puede eliminarlo

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

si está dentro de la función real, puede usar argumentos.callee como referencia a la función. como en:

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

EDITAR: Esto no funcionará si está trabajando en modo estricto ( "use strict";)

Una versión de la solución de Otto Nascarella que funciona en modo estricto es:

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));  

Puede haber varias funciones anónimas, keydown 1

Advertencia: solo funciona Chrome Dev Toolsy no se puede usar en el código : enlace

en los navegadores modernos, puede hacer lo siguiente ...

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

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

Una opción no tan anónima

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);

Desde que recibí comentarios de Andy ( muy bien, pero como con muchos ejemplos, deseaba mostrar una expansión contextual de la idea ), aquí hay una exposición menos complicada :

<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>

Esto permite una estructura de función efectivamente anónima, evita el uso de llamadas prácticamente obsoletas y permite una fácil eliminación.

Por cierto : la eliminación del elemento de script inmediatamente después de configurar el oyente es un lindo truco para ocultar el código que uno preferiría que no fuera tan obvio para las miradas indiscretas ( estropearía la sorpresa ;-)

Entonces el método ( más simplemente ) es:

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

Esto no es ideal, ya que elimina todo, pero podría funcionar para sus necesidades:

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

La clonación de un nodo copia todos sus atributos y sus valores, incluidos los oyentes intrínsecos (en línea). No copia los detectores de eventos agregados usando addEventListener ()

Node.cloneNode ()

JavaScript : el método addEventListener registra el oyente especificado en EventTarget (Elemento | documento | Ventana) al que se llama.

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

Mouse, eventos de teclado Prueba de ejemplo en 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);

El método removeEventListener elimina el detector de eventos registrado previamente con EventTarget.addEventListener ().

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

Puedo usar

Para dar un enfoque más actualizado a esto:

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

Me he encontrado con el mismo problema y esta fue la mejor solución que pude obtener:

/*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;

Tenga en cuenta que solo he probado esto para el windowelemento y para el 'mousemove'evento, por lo que podría haber algunos problemas con este enfoque.

Posiblemente no sea la mejor solución en términos de lo que está pidiendo. Todavía no he determinado un método eficiente para eliminar la función anónima declarada en línea con la invocación del detector de eventos.

Yo personalmente uso una variable para almacenar <target>y declarar la función fuera de la invocación del detector de eventos, por ejemplo:

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

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

Luego, para eliminar el oyente:

target.removeEventListener('click', myFunc);

No es la principal recomendación que recibirá, pero para eliminar funciones anónimas, la única solución que he encontrado útil es eliminar y luego reemplazar el elemento HTML. Estoy seguro de que debe haber un método JS de vainilla mejor, pero aún no lo he visto.

Sé que este es un hilo bastante antiguo, pero pensé que podría poner mis dos centavos para aquellos que lo encuentren útil.

El guión (disculpas por los nombres de métodos poco creativos):

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;
        }
    }
};

Y puedes usarlo así:

// 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(){};