Javascript / DOM：如何删除DOM对象的所有事件？

小编典典

Javascript / DOM：如何删除DOM对象的所有事件？

javascript

只是一个问题：有什么方法可以完全删除对象（例如div）的所有事件？

编辑：我正在添加div.addEventListener('click',eventReturner(),false);一个事件。

function eventReturner() {
    return function() {
        dosomething();
    };
}

EDIT2：我找到了一种可行的方法，但无法用于我的情况：

var returnedFunction;
function addit() {
    var div = document.getElementById('div');
    returnedFunction = eventReturner();
    div.addEventListener('click',returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it would change, if the function was called again.
}
function removeit() {
    var div = document.getElementById('div');
    div.removeEventListener('click',returnedFunction,false);
}

阅读 1837

2020-05-01

共1个答案

小编典典

我不确定 _删除所有事件_是什么意思。删除特定事件类型的所有处理程序还是删除一种类型的所有事件处理程序？

删除所有事件处理程序

如果要删除所有（任何类型的）事件处理程序，则可以克隆该元素并将其替换为其克隆：

var clone = element.cloneNode(true);

注意： 这将保留属性和子项，但不会保留对DOM属性的任何更改。

删除特定类型的“匿名”事件处理程序

另一种方法是使用，removeEventListener()但我想您已经尝试过了，但是没有用。

addEventListener每次调用匿名函数都会创建一个新的侦听器。调用removeEventListener匿名函数无效
。匿名函数每次被调用时都会创建一个唯一的对象，尽管它可以调用一个对象，但它并不是对现有对象的引用。以这种方式添加事件侦听器时，请确保仅添加一次，它是永久的（无法删除），直到添加到它的对象被销毁为止。

您实质上是将匿名函数传递给addEventListeneras eventReturner返回一个函数。

您可以通过两种方法解决此问题：

不要使用返回函数的函数。直接使用功能：

function handler() {
dosomething();
}

div.addEventListener('click',handler,false);

为此创建一个包装，addEventListener该包装存储对返回的函数的引用，并创建一些奇怪的removeAllEvents函数：

var _eventHandlers = {}; // somewhere global

function addListener(node, event, handler, capture) {
if(!(node in _eventHandlers)) {
    // _eventHandlers stores references to nodes
    _eventHandlers[node] = {};
}
if(!(event in _eventHandlers[node])) {
    // each entry contains another entry for each event type
    _eventHandlers[node][event] = [];
}
// capture reference
_eventHandlers[node][event].push([handler, capture]);
node.addEventListener(event, handler, capture);
}

function removeAllListeners(node, event) {
if(node in _eventHandlers) {
    var handlers = _eventHandlers[node];
    if(event in handlers) {
        var eventHandlers = handlers[event];
        for(var i = eventHandlers.length; i--;) {
            var handler = eventHandlers[i];
            node.removeEventListener(event, handler[0], handler[1]);
        }
    }
}
}

然后，您可以将其用于：

    addListener(div, 'click', eventReturner(), false)
// and later
removeAllListeners(div, 'click')

注意： 如果您的代码运行了很长时间，并且正在创建和删除许多元素，那么在_eventHandlers销毁它们时必须确保删除其中包含的元素。

2020-05-01