如果删除元素，我是否必须清除 DOM 中的事件？

Question

假设我有一个动态加载页面的页面。当每个页面加载到 DOM 中时，就会添加该页面中元素的事件。

如果用户加载另一个页面，先前加载的元素将从 DOM 中删除。当然，由于元素本身不再存在，映射到这些元素的任何事件都将停止运行。

然而，它们也被删除了吗？或者它们是否存在于用户的记忆中，占用空间？

后续： 是否有这样定义的函数：

var event = $('foobar').addEvent('click', function() {
    alert(1);
});

可以使用 event = null 轻松删除事件（或者我是这么假设的！）...

但是如果事件没有保存到局部变量中怎么办？

$('foobar').addEvent('click', function() {
    alert(1);
});

谢谢！

Answer 1

首先。什么？这是没有意义的：

var event = $('foobar').addEvent('click', function() {
    alert(1);
});

它不会像您想象的那样将事件保存到局部变量中。它将对 foobar 元素对象 的引用保存到 event 变量中 - 大多数 mootools 元素方法将返回 this 进行链接，即元素本身而不是方法的结果（除非它是像“.getStyle”这样的吸气剂）。

这取决于你如何摆脱这个元素，接下来会发生什么。首先，element.destroy，在这里找到：https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L728

它将从 dom 和内存中删除元素，并以安全的方式清空它。一旦它消失，它将依赖于浏览器的 GC 进行清理，mootools 不会为元素本身执行任何壮观的 GC，但它也会在子节点上运行特殊的 clean 函数：varchildren = clean(this).getElementsByTagName('*');。

clean 方法还会删除附加到 div 子元素的任何事件处理程序和存储。

然后。 mootools 添加的事件进入元素存储。元素存储位于元素原型使用的闭包后面的对象中。为了测试它，我们将重新实现它并使其可刺穿（称为存储的全局对象），以便我们可以检查父级消失后引用会发生什么：

http://jsfiddle.net/dimitar/DQ8JU/

(function() {
    var storage = this.storage = {}; // make it puncturable

    var get = function(uid){
        return (storage[uid] || (storage[uid] = {}));
    };

    Element.implement({
       retrieve: function(property, dflt){
            var storage = get($uid(this)), prop = storage[property];
            if (dflt != null && prop == null) prop = storage[property] = dflt;
            return prop != null ? prop : null;
        },

        store: function(property, value){
            var storage = get($uid(this));
            storage[property] = value;
            return this;
        },

        eliminate: function(property){
            var storage = get($uid(this));
            delete storage[property];
            return this;
        }


    });

})();

// read it.
var link = document.getElement("a");
var uid = link.uid; // will reference the mootools unique id for it

// add an event handler
link.addEvent("click", function(e) {
    console.log("hi");
    this.destroy();
    // see what's left in storage for that element.
    console.log(storage[uid]);

    // storage should be empty.
    console.log(storage);
});

link.getFirst().addEvent("mouseenter", function() {
   console.log("over");
});

// check to see if it is there via element storage API.
console.log(link.retrieve("events").click);

// check to see if it's there via our puncture
console.log(this.storage[uid]);

// see all events in storage, inc child element:
console.info(this.storage);

这一切证明的是，mootools 可以清理所有你需要清理的东西。只要您不在使用的元素上使用任何内联 onclick= 内容，就可以了。在 mootools 的垃圾收集和浏览器之间，您可以得到很好的保护。请注意，如果回调是匿名的，您可以在单个元素上堆叠多个事件。

Answer 2

有趣的问题...阅读以下内容：https://developer.mozilla。 org/en/DOM/element.addEventListener#Memory_issues

要使用 jQuery 删除事件侦听器，请参阅 http://api.jquery.com/unbind/

Answer 3

我发现旧版本的 IE 似乎在添加和删除大量绑定事件的元素时存在问题。主要原因是循环引用无法被垃圾收集。您可以在此处找到更多信息：http://msdn.microsoft.com/en-us/ library/Bb250448

设置为 null 不会删除该事件，它只会删除对该事件的引用。您需要同时使用 element.removeEventListener 和 element.detachEvent （取决于浏览器），或者如果您使用 jquery unbind 应该可以工作。

此外，还有一些工具可用于检测泄漏，这个工具效果很好（根据同事的说法）：http://blogs.msdn.com/b/gpde/archive/2009/08/03/javascript-memory-leak- detector-v2.aspx