如何从多个元素中删除事件答案

【问题标题】：How to remove event from multiple elements如何从多个元素中删除事件
【发布时间】：2013-07-12 23:14:38
【问题描述】：

我正在尝试删除我的 input 元素的事件。

我有以下

//add mouse up event on all element under mainDiv
addEvent('mainDiv', 'onmouseup', mouseUpFun);

//search all the input elements and remove the mouse up event 
inputs = document.getElementsByTagName('input');
    for(var i; i < inputs.length; i++){
      var input = inputs[i];
       input.removeEventListener('onmouseup');
    }

上面的代码不起作用，仍然附加了onmouseup 事件。

谁能帮我解决这个问题？非常感谢！

【问题讨论】：

如果没有看到addEvent做了什么，就很难调试。
也检查一下：stackoverflow.com/questions/803936/…
如果你有除addEventListener()之外的其他方法在addEvent()函数中附加事件，你可能也应该创建一个对应的removeEvent()。

标签： javascript

【解决方案1】：

嗯，一个原因可能是你的循环永远不会运行。您需要在循环中初始化i：

for(var i = 0; i < inputs.length; i++){
   var input = inputs[i];
   input.removeEventListener('onmouseup');
}

否则，由于i 的初始值为undefined，此循环将永远不会运行。

您对removeEventListener 的呼叫也不会按预期工作。您还需要提供对您使用的侦听器/处理程序的引用。

请参阅here，了解removeEventListener 的正确用法。

如果一切都在使用mouseUpFun，您可以将其提供给removeEventListener：

input.removeEventListener('onmouseup', mouseUpFun);

【讨论】：

最好的写法是 for(var i = 0, len = inputs.length; i
避免每次循环迭代重新计算长度的性能拖累
@CaseyFlynn 有那么大的影响吗？每次都要重新计算吗？我想它只有一个属性，只要数组被修改，它就会更新。我对这种性能微优化持谨慎态度。
@CaseyFlynn 刚刚在 jsPerf 上运行了一个测试用例，似乎在使用 array.length is marginally faster。
我不确定 console.log 如何影响测试，但试试这个：jsperf.com/caching-array-length/4

【解决方案2】：

见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener

当你使用removeEventListener时，你需要一个你想要移除的监听函数的引用。

那么，你可以：

使用 addEvent 函数，您可以保存添加的侦听器的引用

或

您可以克隆元素并将其替换为克隆。这样，您将删除所有事件侦听器（包括其子事件侦听器）。

【讨论】：