当元素被移除时，事件监听器会发生什么？

Question

如果我有一系列像这样创建的事件监听器：

例如：

var els = document.getElementyById('myList').getElementsByTagName('li');
for (i=0;i<els.length;i++) {
    els[i].addEventListener(eventType, function(e){ /* do stuff */ }, true);
}

首先，我是否犯了类似这样的异端邪说？我的意思是，除了为每个<li>元素创建一个事件之外，还有没有更简单的方法？

无论哪种情况，主要问题是：如果删除/替换<li>，那么这些事件侦听器会发生什么？如果我这样做会发生什么：

document.getElementyById('myList').innerHTML = 'Hello World!';

监听器是否会保持“挂起”状态，从而减慢浏览器的速度（假设我有很多

元素），还是它们会自动删除？这是一个问题吗？

- Sean Bone

---

它们也会被垃圾回收。 - undefined

@ArunPJohny ...什么意思？ - undefined

“除了为每个<li>元素创建一个事件外，是否有更简单的方法？” - 在此情况下，附加到包含的ul元素的委派处理程序是有意义的。这不一定更“简单”，但只是稍微复杂一些且更有效 - 或者如果您正在动态添加li元素，则可能更简单。并且它完全避免了您担心的问题。 - undefined

这意味着它们从内存中被移除。此外，如果您的每个事件都执行相同的操作，请将它们绑定到包围的<ul>元素上 - 点击事件会从<li>元素冒泡到<ul>元素。 - undefined

如果要执行相同的代码，你至少需要先创建函数，然后将其引用到事件监听器中，这样就不会有多个相同的匿名函数。 - undefined

@nnnnnn 多谢大家！有人愿意写答案吗，还是我来写？:) - undefined

Answer 1

被分配给已销毁元素的事件处理程序将被标记为垃圾回收，这意味着它们将从内存中删除。此外，如果您的每个事件都执行相同的操作，请将它们绑定到包围的 <ul> 上 - 单击事件将从 li 冒泡到 ul。

另外，

“是否有比针对每个 <li> 元素都创建事件更简单的方法？” 在此处使用附加到包含 ul 元素的委托处理程序是有意义的。 不一定更简单，但只稍微复杂一些且更有效率 - 或者如果您正在动态添加 li 元素，则可能更简单。 并且它完全避免了您担心的问题。(由 @nnnnnn 提供)

（将注释转换为答案，因为它似乎有助于回答问题。）

- Maxim Kumpan