javascript - 在 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 为键。请注意，这意味着只要元素或您的单独对象中的条目引用它们，您就会将这些函数保留在内存中，这可能并不理想。

这是#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>