在Javascript中删除事件侦听器表单元素没有克隆元素并且不知道removeEventListener（）的第二个参数

Question

我在这里搜索了几个问题但是找不到答案。 接受的答案removeEventListener without knowing the function仅适用于Chrome，非严格模式也适用。

我有三个功能。一个使用选择器将事件侦听器附加到元素，另一个用于从元素中删除事件侦听器，第三个用于从页面中删除所有事件侦听器。

这些功能类似于：

function listen(node, event, callback, options)
{
    node.addEventListener(event, callback, options);
}



removeAllListeners(node)
{

}


removeListener(node, event)
{

}

用户可以将任何类型的回调函数传递给附加侦听器的函数。 如何删除事件监听器。

我也不想使用任何第三方库。

尝试：

var eventlistener = getEventListeners(window)["DOMContentLoaded"][index];
window.removeEventListener("DOMContentLoaded", eventlistener.listener, eventlistener.useCapture);

但仅适用于chrome，而且仅适用于非严格模式。

Answer 1

由于您正在处理自己的事件侦听器，因此有很多方法可以解决这个问题。想到两个：

1. 在元素上使用expando属性来跟踪监听器函数，以便做知道removeEventListener的第二个参数。使用expando属性时要小心，以避免命名冲突（例如，选择一个非常特定于代码的长名称）。

2. 在listen中为元素分配ID，并将其处理程序（以及它们处理的事件）存储在一个单独的对象中，该ID由该ID键入。请注意，这意味着只要 元素或单独对象中的条目引用它们，就会将函数保留在内存中，这可能并不理想。< / p>

以下是＃1的例子：

var handlersKey = "___handlers___" + Math.floor(Math.random() * 100000);

function listen(node, event, callback, options)
{
    node.addEventListener(event, callback, options);
    if (!node[handlersKey]) {
      node[handlersKey] = Object.create(null);
    }
    if (!node[handlersKey][event]) {
      node[handlersKey][event] = [];
    }
    node[handlersKey][event].push(callback);
}


function removeAllListeners(node)
{
    if (!node[handlersKey]) {
        return;
    }
    Object.keys(node[handlersKey]).forEach(function(event) {
        removeListener(node, event);
    });
    delete node[handlersKey];
}


function removeListener(node, event)
{
    var handlers = node[handlersKey];
    var callbacks = handlers && handlers[event];
    if (callbacks) {
        callbacks.forEach(function(callback) {
            node.removeEventListener(event, callback);
        });
        delete handlers[event]
    }
}

listen(document.getElementById("target"), "mouseenter", function() {
    console.log("Got mouseenter");
});
listen(document.getElementById("target"), "mouseleave", function() {
    console.log("Got mouseleave");
});
listen(document.getElementById("target"), "click", function() {
    console.log("Removing all listeners");
    removeAllListeners(this);
});

<div id="target">Click me, I'll respond only once</div>