js一个元素从DOM中被删除后，他所绑定的事件浏览器是如何处理的？

Question

我给dom添加了一个span,然后给这span绑定click事件，然后将span元素从dom中移除，那么它所绑定的click事件浏览器会如何处理？

Answer 1

这个事情得分说

1. 使用Node.removeChild(element)和ChildNode.remove()并不会直接释放对应的event listener，但是会被gc。如果该dom对象在js中再无其他引用，与之绑定的event listener就会在合理的时机被gc。

   如果被remove的dom对象没有其他引用，你并不需要手动解绑事件

   element = document.getElementById("xxx");
   element.remove();
   element = null;  // 对该dom对象的引用数变为0，gc会适时回收该dom对象上的所有event listener

   也正是因为dom的删除，不会直接删掉对应的event listener这一特性，才会因为部分早期版本的浏览器(特别是IE)中gc算法的不完善，导致javascript的Memory Leak

2. jQuery中的remove方法，会在移除dom元素的同时，调用一个内部函数cleanData将所有子节点及相关的event listener全部移除

   // jQuery.fn.remove
   function (selector, keepData
   /* Internal Use Only */
   ) {
       var elem, elems = selector ? jQuery.filter(selector, this) : this,
       i = 0;
   
       for (;
       (elem = elems[i]) != null; i++) {
   
           if (!keepData && elem.nodeType === 1) {
   // ==========================================================
               jQuery.cleanData(getAll(elem));  //  ATTENTION
   // ==========================================================
           }
   
           if (elem.parentNode) {
               if (keepData && jQuery.contains(elem.ownerDocument, elem)) {
                   setGlobalEval(getAll(elem, "script"));
               }
               elem.parentNode.removeChild(elem);
           }
       }
   
       return this;
   }
   
   // jQuery.cleanData
   function (elems,
   /* internal */
   acceptData) {
       var elem, type, id, data, i = 0,
           internalKey = jQuery.expando,
           cache = jQuery.cache,
           deleteExpando = support.deleteExpando,
           special = jQuery.event.special;
   
       for (;
       (elem = elems[i]) != null; i++) {
           if (acceptData || jQuery.acceptData(elem)) {
   
               id = elem[internalKey];
               data = id && cache[id];
   
               if (data) {
                   if (data.events) {
                       for (type in data.events) {
                           if (special[type]) {
                               jQuery.event.remove(elem, type);
   
                               // This is a shortcut to avoid jQuery.event.remove's overhead
                           } else {
   // ==========================================================
                               jQuery.removeEvent(elem, type, data.handle);  // ATTENTION
   // ==========================================================
                           }
                       }
                   }
   
                   // Remove cache only if it was not already removed by jQuery.event.remove
                   if (cache[id]) {
   
                       delete cache[id];
   
                       // IE does not allow us to delete expando properties from nodes,
                       // nor does it have a removeAttribute function on Document nodes;
                       // we must handle all of these cases
                       if (deleteExpando) {
                           delete elem[internalKey];
   
                       } else if (typeof elem.removeAttribute !== strundefined) {
                           elem.removeAttribute(internalKey);
   
                       } else {
                           elem[internalKey] = null;
                       }
   
                       deletedIds.push(id);
                   }
               }
           }
       }
   }