У меня есть объект, в котором есть методы. Эти методы помещаются в объект внутри анонимной функции. Выглядит это так:

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

(кода намного больше, но этого достаточно, чтобы показать проблему)

Теперь я хочу в некоторых случаях останавливать прослушиватель событий. Поэтому я пытаюсь выполнить removeEventListener, но не могу понять, как это сделать. Я читал в других вопросах, что невозможно вызвать removeEventListener для анонимных функций, но так ли это в этой ситуации?

У меня есть метод, созданный внутри анонимной функции, и поэтому я подумал, что это возможно. Выглядит так:

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

Почему я не могу этого сделать?

Есть ли другой (хороший) способ сделать это?

Бонусная информация; это должно работать только в Safari, отсюда и отсутствие поддержки IE.

Я считаю, что в этом суть анонимной функции, у нее нет имени или способа ссылаться на нее.

На вашем месте я бы просто создал именованную функцию или поместил ее в переменную, чтобы у вас была ссылка на нее.

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

Затем вы можете удалить его с помощью

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

если вы находитесь внутри самой функции, вы можете использовать arguments.callee в качестве ссылки на функцию. как в:

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

РЕДАКТИРОВАТЬ: это не сработает, если вы работаете в строгом режиме ( "use strict";)

Версия решения Отто Наскареллы , работающая в строгом режиме:

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

Может быть несколько анонимных функций, keydown 1

Предупреждение: работает только в Chrome Dev Toolsи не может использоваться в коде : ссылка

в современных браузерах вы можете сделать следующее ...

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

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

Не такой уж анонимный вариант

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

С момента получения отзыва от Энди ( совершенно верно, но, как и во многих примерах, я хотел показать контекстное расширение идеи ), вот менее сложное изложение:

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

Это обеспечивает эффективную анонимную структуру функций, позволяет избежать использования практически устаревшего вызываемого объекта и позволяет легко удалить.

Между прочим : удаление элемента сценария сразу после установки слушателя - это симпатичный трюк для сокрытия кода, который, как хотелось бы, не был совершенно очевидным для посторонних глаз ( испортило бы сюрприз ;-)

Итак, метод ( проще ):

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

Это не идеально, поскольку удаляет все, но может сработать для ваших нужд:

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

При клонировании узла копируются все его атрибуты и их значения, включая внутренних (встроенных) слушателей. Он не копирует прослушиватели событий, добавленные с помощью addEventListener ().

Node.cloneNode ()

JavaScript : метод addEventListener регистрирует указанный слушатель в EventTarget (Element | document | Window), который он вызывает.

EventTarget. addEventListener ( тип_события , функция- обработчик , всплывание | захват );

События мыши, клавиатуры Пример теста в 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 удаляет прослушиватель событий, ранее зарегистрированный с помощью EventTarget.addEventListener ().

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

могу ли я использовать

Чтобы дать более современный подход к этому:

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

Я наткнулся на ту же проблему, и это было лучшее решение, которое я мог получить:

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

Имейте в виду, что я тестировал это только для windowэлемента и для 'mousemove'события, поэтому при таком подходе могут возникнуть некоторые проблемы.

Возможно, не лучшее решение с точки зрения того, о чем вы спрашиваете. Я до сих пор не определил эффективный метод удаления анонимной функции, объявленной встроенной при вызове прослушивателя событий.

Я лично использую переменную для хранения <target>и объявления функции вне вызова прослушивателя событий, например:

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

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

Затем, чтобы удалить слушателя:

target.removeEventListener('click', myFunc);

Это не самая лучшая рекомендация, которую вы получите, но для удаления анонимных функций единственное решение, которое я нашел полезным, - это удалить, а затем заменить элемент HTML. Я уверен, что должен быть лучший ванильный JS-метод, но я его еще не видел.

Я знаю, что это довольно старая ветка, но подумал, что могу вложить свои два цента для тех, кто сочтет ее полезной.

Скрипт (извиняюсь за некреативные названия методов):

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

И вы можете использовать это так:

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