自動化事件處理程序在清除DOM節點時刪除兒童

Question

有沒有一種方法來反省DOM節點以查看是否附加了事件處理程序，因此您可以有效編寫安全函數來清除DOM節點而不用擔心內存泄漏由事件處理程序？我希望以通用的方式來做到這一點。

Answer 1

從我看到它可能是不可能的，這裏是從Mozilla的網站報價：

https://developer.mozilla.org/en/DOM/element.addEventListener#Memory_issues

內存問題

document.addEventListener（ 「裝載」， 功能（事件）{obj.func（event）;}， false）;

將addEventListener調用到 匿名函數會每次創建一個新的 偵聽器。調用 removeEventListener爲匿名 函數不起作用。一個匿名的 函數會創建一個唯一的對象，每個被調用的時間是 ，它不是一個 對現有對象的引用，儘管它可能會調用一個 。當以這種方式添加事件 聽衆時，請確保它僅添加了一次 ，它是永久性的（可以刪除 ），直到其添加的對象 被銷燬。

如果聽者不是匿名的，你可以這樣做。這裏是YUI庫事件的一段代碼：

 /** 
     * Returns all listeners attached to the given element via addListener. 
     * Optionally, you can specify a specific type of event to return. 
     * @method getListeners 
     * @param el {HTMLElement|string} the element or element id to inspect 
     * @param sType {string} optional type of listener to return. If 
     * left out, all listeners will be returned 
     * @return {Object} the listener. Contains the following fields: 
     *   type: (string) the type of event 
     *   fn:  (function) the callback supplied to addListener 
     *   obj: (object) the custom object supplied to addListener 
     *   adjust: (boolean|object) whether or not to adjust the default context 
     *   scope: (boolean) the derived context based on the adjust parameter 
     *   index: (int)  its position in the Event util listener cache 
     * @static 
     */   
     getListeners: function(el, sType) { 
      var results=[], searchLists; 
      if (!sType) { 
       searchLists = [listeners, unloadListeners]; 
      } else if (sType === "unload") { 
       searchLists = [unloadListeners]; 
      } else { 
       sType = this._getType(sType); 
       searchLists = [listeners]; 
      } 

      var oEl = (YAHOO.lang.isString(el)) ? this.getEl(el) : el; 

      for (var j=0;j<searchLists.length; j=j+1) { 
       var searchList = searchLists[j]; 
       if (searchList) { 
        for (var i=0,len=searchList.length; i<len ; ++i) { 
         var l = searchList[i]; 
         if (l && l[this.EL] === oEl && 
           (!sType || sType === l[this.TYPE])) { 
          results.push({ 
           type: l[this.TYPE], 
           fn:  l[this.FN], 
           obj: l[this.OBJ], 
           adjust: l[this.OVERRIDE], 
           scope: l[this.ADJ_SCOPE], 
           index: i 
          }); 
         } 
        } 
       } 
      } 

      return (results.length) ? results : null; 
     }, 

，你可以在這裏閱讀更多： http://developer.yahoo.com/yui/event/

Answer 2

這要看情況。由el.onclick = ...等屬性指定的簡單事件處理程序可以被有效移除，但是沒有通過attachEvent()在IE中添加的處理程序列表。在其他瀏覽器中，Memory leaks並不是什麼大問題。

/** 
* The purge function takes a reference to a DOM element as an argument. 
* It loops through the element's attributes. If it finds any functions, 
* it nulls them out. This breaks the cycle, allowing memory to be reclaimed. 
* It will also look at all of the element's descendent elements, and clear 
* out all of their cycles as well. 
* - http://javascript.crockford.com/memory/leak.html 
*/ 
function purge(d) { 
    var a = d.attributes, i, l, n; 
    if (a) { 
     l = a.length; 
     for (i = 0; i < l; i += 1) { 
      n = a[i].name; 
      if (typeof d[n] === 'function') { 
       d[n] = null; 
      } 
     } 
    } 
    a = d.childNodes; 
    if (a) { 
     l = a.length; 
     for (i = 0; i < l; i += 1) { 
      purge(d.childNodes[i]); 
     } 
    } 
} 

如果你想處理這兩種情況下，你管理你的頁面的所有事件處理程序，你可以在自己的功能包addEvent功能，並刪除它們時的元素將被刪除。