Eu tenho um objeto que contém métodos. Esses métodos são colocados no objeto dentro de uma função anônima. Se parece com isso:

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

(há muito mais código, mas isso é o suficiente para mostrar o problema)

Agora, quero interromper o ouvinte de eventos em alguns casos. Portanto, estou tentando fazer um removeEventListener, mas não consigo descobrir como fazer isso. Eu li em outras perguntas que não é possível chamar removeEventListener em funções anônimas, mas isso também acontece nesta situação?

Tenho um método em t criado dentro da função anônima e, portanto, pensei que fosse possível. Se parece com isso:

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

Por que não posso fazer isso?

Existe alguma outra (boa) maneira de fazer isso?

Informações de bônus; isso só precisa funcionar no Safari, daí a falta de suporte ao IE.

Acredito que seja o ponto de uma função anônima, falta um nome ou uma forma de referenciá-la.

Se eu fosse você, apenas criaria uma função nomeada ou a colocaria em uma variável para que você tenha uma referência a ela.

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

Você pode então removê-lo por

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

se você estiver dentro da função real, pode usar arguments.callee como referência para a função. como em:

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

EDITAR: Isso não funcionará se você estiver trabalhando no modo estrito ( "use strict";)

Uma versão da solução de Otto Nascarella que funciona em modo estrito é:

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

Podem ser várias funções anônimas, tecla 1

Aviso: só funciona Chrome Dev Toolse não pode ser usado no código : link

em navegadores modernos, você pode fazer o seguinte ...

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

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

Uma opção não tão 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 recebi feedback de Andy ( certo, mas como acontece com muitos exemplos, eu gostaria de mostrar uma expansão contextual da ideia ), aqui está uma exposição 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>

Isto permite uma estrutura de função efetivamente anônimo, evita o uso do praticamente obsoleto receptor e permite a remoção fácil.

Incidentalmente : a remoção do elemento de script imediatamente após definir o ouvinte é um truque engraçado para esconder o código que alguém preferiria que não fosse totalmente óbvio para olhos curiosos ( estragaria a surpresa ;-)

Portanto, o método ( mais simplesmente ) é:

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

Isso não é ideal, pois remove tudo, mas pode funcionar para suas necessidades:

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

A clonagem de um nó copia todos os seus atributos e seus valores, incluindo ouvintes intrínsecos (em linha). Ele não copia ouvintes de eventos adicionados usando addEventListener ()

Node.cloneNode ()

JavaScript : o método addEventListener registra o ouvinte especificado no EventTarget (Element | document | Window) em que é chamado.

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

Eventos de mouse, teclado Exemplo de teste no 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);

O método removeEventListener remove o ouvinte de evento registrado anteriormente com EventTarget.addEventListener ().

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

eu posso usar

Para fornecer uma abordagem mais atualizada para isso:

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

Encontrei o mesmo problema e esta foi a melhor solução que consegui:

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

Lembre-se de que testei isso apenas para o windowelemento e para o 'mousemove'evento, portanto, pode haver alguns problemas com essa abordagem.

Possivelmente não é a melhor solução em termos do que você está pedindo. Ainda não determinei um método eficiente para remover a função anônima declarada em linha com a invocação do ouvinte de evento.

Eu pessoalmente uso uma variável para armazenar <target>e declarar a função fora da invocação do ouvinte de evento, por exemplo:

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

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

Em seguida, para remover o ouvinte:

target.removeEventListener('click', myFunc);

Não é a recomendação principal que você receberá, mas para remover funções anônimas, a única solução que achei útil é remover e substituir o elemento HTML. Tenho certeza de que deve haver um método JS vanilla melhor, mas ainda não o vi.

Sei que esse é um tópico bastante antigo, mas achei melhor colocar meus dois centavos para aqueles que o acharem útil.

O script (desculpas pelos nomes dos métodos não criativos):

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

E você pode usá-lo assim:

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