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

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

4 个回答

得票最新

xelz

11.8k21232

发布于
2017-04-06

更新于
2017-04-06

✓ 已被采纳

这个事情得分说

使用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

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