当 DOM 元素消失时，绑定事件会发生什么？答案

【问题标题】：What happens to the bound event when the DOM element vanishes?当 DOM 元素消失时，绑定事件会发生什么？
【发布时间】：2013-01-30 22:25:43
【问题描述】：

当我将事件处理程序绑定到 DOM 元素然后销毁 DOM 元素时会发生什么？我是否必须通过解除绑定事件处理程序的过程？

<div id="el1">
    <span id="c">Click Me!</span>
</div>
<span id="note">Note...</span>
<script>
    var i=0;
    $("#c").click(function(){
        i++;
        $("#note").html("'Click Me!' was clicked.");
        $("#el1").html("<span id=\"c\">Click Me! ("+i+" time)</span>");
    });
</script>

在行动：http://jsfiddle.net/lordloh/FyLdM/

显然，偶数处理程序不会绑定到具有相同 id 的新 DOM 对象。我正在使用的解决方法是

<div id="el1">
   <span id="c">Click Me!</span>
</div>
<span id="note">Note...</span>
<script>
var i=0;
$("#c").click(clickHandler);

function clickHandler(){
    i++;
    $("#note").html("'Click Me!' was clicked.");
    $("#el1").html("<span id=\"c\">Click Me! ("+i+" time)</span>");
    $("#c").click(clickHandler);
}
</script>

在行动：http://jsfiddle.net/lordloh/FyLdM/1/

我担心的是这是一种不好的做法还是可以接受？如果这个序列重复数百万次会发生什么？ javascript 引擎会不会冒内存不足的风险？

【问题讨论】：

你的例子真的没有意义......你为什么不直接在#c上调用.html()方法，而不是重新创建元素？
它仍然是独一无二的 :-) 两个具有相同 ID 的 DOM 对象从未共存过。
@ahren - 这只是一个例子。实际的代码要复杂得多，而在这个例子中做一些事情更简单。在我的实际代码中，<div id="el1"> 中的<spans> 的数量随时间而变化（添加和删除）。每个跨度都有绑定到它的事件处理程序。
您需要问自己的另一件事是否可能会发生数百万次。在它成为问题之前，您不应该关注性能，然后进行优化。或者，如果您真的担心，请在最后做。
该应用程序可能最终部署在一个 24x7 运行数天的信息亭上。黑客可能是每隔几个小时刷新一次页面。 :-)

标签： javascript jquery events javascript-engine

【解决方案1】：

您应该专注于事件委托。

$('#someWrapper').on('click', '.someClass', function() {
   // do your stuff.
});

然后您可以将元素添加到包装器中，将它们分配给.someClass，然后事件就会触发。

【讨论】：

原因如下：stackoverflow.com/questions/1687296/…
谢谢。虽然这是一个不错的方法，而且我最终可能会这样做，但我仍然想知道事件绑定发生了什么以及它在内部是如何处理的？这是垃圾收集器的东西吗？？
这取决于浏览器。 Webkit 和 Mozilla 有很好的 GC，当从 DOM 中删除节点时，它们会解绑事件并正确处理闭包。另一方面，IE 在这方面失败得很惨——尤其是 IE7。

【解决方案2】：

您不必在每次创建元素时都重新绑定事件，而应按照 AlienWebguy 的建议使用事件委托。但是，在这种情况下，从 dom 中删除 jQuery 对象后没有任何内容指向它们，因此垃圾收集应该负责清理未使用的变量。

【讨论】：

垃圾收集是我的想法。你确定吗？还是垃圾收集只是一个有根据的猜测？