У мене є об'єкт, в якому є методи. Ці методи поміщаються в об'єкт всередині анонімної функції. Це виглядає приблизно так:

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, але я не можу зрозуміти, як це зробити. Я в інших питаннях читав, що неможливо викликати deleteEventListener на анонімних функціях, але чи так це в цій ситуації?

У мене є метод t, створений всередині анонімної функції, і тому я вважав, що це можливо. Виглядає так:

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

якщо ви перебуваєте всередині фактичної функції, ви можете використовувати аргументи.callee як посилання на функцію. а саме:

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

EDIT: Це не спрацює, якщо ви працюєте в суворому режимі ( "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));  

Може бути кілька анонімних функцій, клавіатура 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 (Елемент | документ | Вікно), до якого він викликаний.

EventTarget. addEventListener ( тип_події , функція_обробника, Bubbling | Захоплення );

Миша, події клавіатури Приклад тесту в 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(){};