search

pro-collection / interview-question

目标：收集全网经典面试问题
713 stars 53 forks source link

绑定事件的元素节点销毁又重新创建， 绑定的事件还会生效吗【热度: 337】 #1059

Open yanlele opened 3 weeks ago

yanlele commented 3 weeks ago

关键词：事件委托应用场景

比如我将事件绑定在 body 上面， 后来这个 body 人为移除掉了， 然后又重新创建了一个 body 标签， 那么之前绑定在 body 上面的事件还会生效吗？

如果将事件绑定在 body 上，然后移除了这个 body 标签并重新创建一个 body 标签，之前绑定在旧 body 上的事件不会生效在新的 body 上。

原因如下：

当你使用传统的事件绑定方式（如 addEventListener）将事件绑定到一个特定的 DOM 元素上时，这个绑定是针对特定的实例。一旦该元素被移除，与之相关的事件处理程序也会与该元素一起被销毁。当重新创建一个新的 body 标签时，它是一个全新的 DOM 元素，没有与之前被移除的 body 上的事件处理程序相关联。

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script>
      document.body.addEventListener("click", function () {
        console.log("body clicked");
      });
      // 假设这里有一些代码移除了 body 并重新创建一个新的 body
      const oldBody = document.body;
      oldBody.parentNode.removeChild(oldBody);
      const newBody = document.createElement("body");
      document.documentElement.appendChild(newBody);
    </script>
  </body>
</html>

在这个例子中，点击新创建的 body 不会触发之前绑定的点击事件处理程序。