javascript 删除节点时，addEventListener会发生什么情况？

bvuwiixz 于 2023-05-16 发布在 Java

关注(0)|答案(3)|浏览(315)

我动态地生成对象，当它们被创建时，我向它们添加单击事件侦听器：

let elements = document.getElementsByClassName("my-class")

for (let element of elements) {
    element.addEventListener('click', function() {
        // here I do my job
    }, false)
}

之后，用户可以删除一些对象。我用这个方法把它们取下来：

element.remove()

现在我想知道接下来会发生什么

此侦听器是否仍然存在？我希望听众少一个。但如何检查呢？
我真的需要担心大量的听众吗？听众的数量有多大会成为一个问题？我担心我的应用程序会崩溃。

JavaScript

来源：https://stackoverflow.com/questions/76239103/what-happens-to-the-addeventlistener-when-i-remove-node

3条答案

按热度按时间

pcww981p1#

你可以检查这个问题的答案
If a DOM Element is removed, are its listeners also removed from memory?
如果没有对事件监听器的引用，则垃圾收集器算法将收集已删除节点的事件监听器

赞(0）回复(0）举报 2023-05-16

7gs2gvoe2#

是的，监听器仍然存在。在Chrome和FF devtools中，有一个名为getEventListener(node)的函数。尝试一下，请注意，即使在调用el.remove()之后，仍然有事件侦听器附加到该元素。

这意味着，如果我们删除一个元素并将相同的元素添加到HTML中的任何位置，事件侦听器仍然可以工作：

const c = document.getElementById("c")

c.addEventListener("click", () => alert("clicked"))

setTimeout(() => c.remove(), 1000)
setTimeout(() => document.body.appendChild(c), 2000)

<button id="c">click</button>

但这一定是个问题吗？不，不太想。浏览器会优化你的代码，正如在this post中提到的，这不是应该困扰你的事情。您对重载事件的关注也不应该是一个问题;浏览器已经优化了几十年;您的事件存储在特定事件的侦听器列表中，该列表仅在用户触发该事件时查找。
我设想的问题的唯一方式是，如果你离开一切悬而未决，不清理它的范围。举个例子：

const length = 1_000_000
const elements = Array.from({ length }, () => {
  const el = document.createElement("button")
  el.addEventListener("click", () => alert("do something..."))
})

elements.forEach(el => el.remove()) // <-- this does NOT free up our listener functions, however

如上所述，我们可以使用scope来自动丢弃我们的值或显式调用el.removeEventListener（但您需要对该函数的引用）。

赞(0）回复(0）举报 2023-05-16

juud5qan3#

不可以，如果你从DOM中移除元素，那么它的关联事件监听器也会被移除。
如果要在不移除元素的情况下移除事件侦听器，请使用

element.removeEventListener(type,()=>{ 
    console.log("Event Removed")
)}

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 删除节点时，addEventListener会发生什么情况？

3条答案

相关问题

热门标签

最新问答