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

mizri
  • 77

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

回复
阅读 15.1k
4 个回答
xelz
  • 11.8k
✓ 已被采纳

这个事情得分说

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

研究理工科问题,实验总是少不了的,

https://jsfiddle.net/rafq1vty/

给 span 添加了事件之后再删除,再恢复回来,事件依然有效。试验结论:span 从 DOM 中删除了,但是对象还在啊,它的属性、事件这些都还在啊,所以再加回 DOM,仍然有效。

有很大的可能性留在内存中(特别是ie),没法被当做垃圾回收。所以在已经知道要移除dom的时候最好手动移除对应的事件处理程序。

请问移除DOM元素的时候一并移除其上的事件的特性哪些浏览器从哪些版本开始支持的呢,我在我的ie11和chrome63上发现已经有这个特性了

1 篇内容引用
宣传栏