JS сложный массаж области

Question

Для конкретного слушателя в моем приложении, я использую следующий код для уничтожения области видимости:

// this is all in a prototype of MyClass
var self = this;
myElement.addEventListener("stuff", function(e){self.doStuff(e)});

Получит doStuff желаемую this привязку.

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

// in a different prototype of MyClass
var self = this;
myElement.removeEventListener("stuff", function(e){self.doStuff(e)}); // doesn't work

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

* примечание, использование переменных global / static любым способом запрещено из-за характера проекта (в противном случае это будет просто!)

Answer 1

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

Вам нужно сделать что-то вроде этого:

var self = this;
var listener = function(e){self.doStuff(e)}
myElement.addEventListener("stuff", listener);
// later
myElement.removeEventListener("stuff", listener);

Неважно, что тела ваших двух функций одинаковы; они все еще разные функции.

См:

• https://developer.mozilla.org/en/DOM/element.removeEventListener

Answer 2

Встроенные анонимные функции в любом случае очень плохая практика, поэтому я предложу очевидное:

function MyClass() {
    this.onStuff = this.onStuff.bind(this); //Each instance steals the prototyped function and adds a bound version as their ownProperty
}

MyClass.prototype = {

    onStuff: function (e) { //Prototyped, no instance actually uses this very function
        this.dostuff()
    },

    bind: function () {
        myElement.addEventListener("stuff", this.onStuff);
    },

    unbind: function () {
        myElement.removeEventListener("stuff", this.onStuff);
    }

}

Answer 3

см. removeEventListener для анонимных функций в JavaScript

Вы не можете удалитьEventListener как использование анонимной функции.