每次div更改时都添加事件处理程序

Question

我正试图将事件处理程序添加到一个特定的div中，该div包含经常更改的元素。有不同的选项卡，每个选项卡在单击时呈现API的不同数据问题是，我需要在每个选项卡中的一些元素中添加事件处理程序。当我添加事件处理器并且选项卡发生更改时，事件处理程序也会发生更改。

如何：

• 仅在页面加载后设置事件处理程序
• 每次重新加载选项卡时

Answer 1

您可以检查元素是否更新，如果它们已经更改，请在目标上使用removeEventListener。

另一个效率不高但仍然有效的选项是使用addEventListener函数的第三个参数作为选项。{once: true}将使您的事件侦听器只发生一次，然后您检查元素是否发生了更改，然后再附加另一个侦听器，或者重用该侦听器。关于MDN 的更多信息

Answer 2

我意识到，在选择元素后，我一直在清除它们，然后我试图更新它们，即使我已经清除了它们。

解决方案是重新选择

例如：当我的程序启动时，我选择这样的元素：

const ele = document.querySelector(".class")

然后在代码中的某个位置，我清除父元素，如下所示：

document.querySelector(".parentElementClass").innerHTML = "";

清除后，我尝试使用这样的清除元素：

ele.addEventListener...

这是错误的，这就是错误的来源。我要做的是再次重新选择元素，然后像这样添加事件侦听器：

const ele = document.querySelector(".class")
ele.addEventListener("...