addEventListener 内存泄漏答案

【问题标题】：addEventListener memory leaksaddEventListener 内存泄漏
【发布时间】：2011-02-07 13:04:19
【问题描述】：

当通过addEventListener在一个元素上注册一个事件，然后删除该元素而不移除该事件，并且重复这样做，内存会被“泄露”吗？

【问题讨论】：

【解决方案1】：

如果您从 DOM 中删除附加了侦听器的元素，则会发生内存泄漏。但这只发生在IE、Fx等有高级GC的情况下。

如果你不是通过 DOM 而是像 DOM 那样操作 DOM 元素，通常会发生这种情况

el.innerHTML = ...

例如，YUI 有自定义实现 setInnerHTML，以防止这种情况下的内存泄漏。

【讨论】：

喜欢你使用innerHTML指定内存泄漏的事实

【解决方案2】：

它不应该泄漏。当事件处理程序导致 host-objectJS-object 循环时，因像地狱一样泄漏而臭名昭著的浏览器是 IE（最高版本 7），而 IE（最高版本 8）不支持 addEventListener。

如果您想在特定浏览器中测试它，请让它运行并查看浏览器的内存使用量长期受到的影响。

<div id="x"></div>
<script type="text/javascript">
    function replace() {
        var x= document.getElementById('x');
        if (x.firstChild!==null)
            x.removeChild(x.firstChild);
        var el= document.createElement('p');
        el.addEventListener('click', click, false);
        x.appendChild(el);
    }
    function click() {
        alert('click');
    };
    setInterval(replace, 1);
</script>

（要在存在引用循环的情况下对其进行测试，请将 function click 定义向上移动到 replace 正文中。）

【讨论】：