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

Question

Javascript / DOM：如何删除DOM对象的所有事件？只是提问：有没有办法彻底删除对象的所有事件，例如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);}

Answer 1

我不确定你删除所有事件的意思。删除特定类型事件的所有处理程序或一种类型的所有事件处理程序？

删除所有事件处理程序

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

var clone = element.cloneNode(true);

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

---

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

另一种方法是使用，removeEventListener()但我想你已经尝试过这个并没有用。这是一个问题：

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

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

您有两种可能性来解决这个问题：

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

   function handler() {
       dosomething();}div.addEventListener('click',handler,false);

2. 创建一个包装器，用于addEventListener存储对返回函数的引用并创建一些奇怪的removeAllEvents函数：

   var _eventHandlers = {}; // somewhere globalfunction 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 laterremoveListeners(div, 'click')

DEMO

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

Answer 2

这将从子节点中删除所有侦听器，但对于大页面来说会很慢。写得非常简单。

element.outerHTML = element.outerHTML;