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）; //你需要在这里进行一个var而不是直接调用eventReturner（），因为函数地址必须相同，如果函数再次被调用，它将会改变。 
} 
 function removeit（）{
 var div = document.getElementById（'div'）; 
 div.removeEventListener（'click'，returnedFunction，false）; 
} 
  

解决方案

我不知道你是什么意味着使用删除所有事件。删除特定类型事件的所有处理程序或所有事件处理程序的一种类型？

删除所有事件处理程序

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

  var clone = element.cloneNode（）; 
 while（element.firstChild）{
 clone.appendChild（element.lastChild）; 
} 
 element.parentNode.replaceChild（clone，element）; 
  

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

---

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

另一种方法是使用，但我猜你已经尝试过了，没有办法。 ：

您实际上是将 addEventListener 的匿名函数传递给 eventReturner 返回一个函数。 / p>

您必须可以解决这个问题：

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

     function handler（）{
    dosomething（）; 
   } 
    
    div.addEventListener（'click'，handler，false）; 
     




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

     var _eventHandlers = {}; // someplace global 
    
    function addListener（node，event，handler，capture）{
    if（！（_eventHandlers中的节点））{
    // _eventHandlers存储对节点的引用
    _eventHandlers [node] = {}; 
   } 
   如果（！（_eventHandlers [node]中的事件））{
    //每个条目包含每个事件类型的另一个条目
    _eventHandlers [node] [event] = [ ]。 
   } 
    //捕获引用
    _eventHandlers [node] [event] .push（[handler，capture]）; 
    node.addEventListener（event，handler，capture）; 
   } 
    
    function removeAllListeners（node，event）{
    if（node in _eventHandlers）{
    var handlers = _eventHandlers [node]; 
    if（处理程序中的事件）{
    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）
    / /和以后
    removeListeners（div，'click'）
     

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

Just question: Is there any way to completely remove all events of an object, e.g. a div?

EDIT: I'm adding per div.addEventListener('click',eventReturner(),false); an event.

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

EDIT2: I found a way, which is working, but not possible to use for my case:

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);
}

解决方案

I am not sure what you mean with remove all events. Remove all handlers for a specific type of event or all event handlers for one type?

Remove all event handlers

If you want to remove all event handlers (of any type), you could clone the element and replace it with its clone:

var clone = element.cloneNode();
while (element.firstChild) {
  clone.appendChild(element.lastChild);
}
element.parentNode.replaceChild(clone, element);

Note: This will preserve attributes and children, but it will not preserve any changes to DOM properties.

---

Remove "anonymous" event handlers of specific type

The other way is to use removeEventListener() but I guess you already tried this and it didn't work. Here is the catch:

You are essentially passing an anonymous function to addEventListener as eventReturner returns a function.

You have to possibilites to solve this:

1. Don't use a function that returns a function. Use the function directly:

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

2. Create a wrapper for addEventListener that stores a reference to the returned function and create some weird removeAllEvents function:

   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]);
               }
           }
       }
   }
   

   And then you could use it with:

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

DEMO

Note: If your code runs for a long time and you are creating and removing a lot of elements, you would have to make sure to remove the elements contained in _eventHandlers when you destroy them.

这篇关于Javascript / DOM：如何清除DOM对象的所有事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！