如果我只知道元素和事件,请删除事件侦听器

joh*_* j. 5 javascript

如果我只知道元素和事件,但不知道函数,有没有办法删除事件侦听器?

就像是:

var foo = getElementById("foo");
foo.removeEventListener('click');
Run Code Online (Sandbox Code Playgroud)

Yel*_*yev 3

纯JS方法

如果没有对其侦听器方法的引用,则无法分离事件侦听器。

需要指定方法定义listener

修改后的JS

可以使用某种自定义函数,如下所示:

function addEventListenerAndRemember(element, type, listener, useCapture)
{
    if (!element.myEvents) element.myEvents = {};
    if (!element.myEvents[type]) element.myEvents[type] = [];

    element.myEvents[type].push(listener);

    element.addEventListener(type, listener, useCapture || false);
}

function removeAllEventListener(element, type)
{
    element.myEvents.forEach(function() {
        element.myEvents[type].forEach(function(listener) {
            element.removeEventListener(type, listener);
        });
        element.myEvents[type] = [];
    });
}
Run Code Online (Sandbox Code Playgroud)

我不确定这段代码是否有效——它只是一个演示这个想法的例子。
您还可以将这些方法包装addEventListener并覆盖默认行为。就像:

Element.prototype.addEventListenerBase = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type, listener, useCapture) {
    // do the same
};
Run Code Online (Sandbox Code Playgroud)

jQuery方法

对我来说,使用 jQuery 库看起来是最清晰的解决方案。

您可以通过以下方式附加事件:

$("#foo").on('click', function() {

});
Run Code Online (Sandbox Code Playgroud)

并以简单的方式将其分离:

$("#foo").off('click');
Run Code Online (Sandbox Code Playgroud)