使用 JavaScript 从元素中删除所有事件监听器

作者

使用 JavaScript 从元素中移除所有事件监听器

Remove all Event Listeners from an Element using JavaScript

要从元素中删除所有事件侦听器：

  1. 使用cloneNode()方法克隆元素。
  2. 用克隆替换原始元素。
  3. 该cloneNode()方法复制节点的属性及其值，但不复制事件侦听器。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="box" style="background-color: salmon; width: 100px; height: 100px">
      Box 1
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

// 👇️ add 2 event listeners
box.addEventListener('click', function handleClick() {
  console.log('box clicked first');
});

box.addEventListener('click', function handleClick() {
  console.log('box clicked second');
});

// ✅ Remove event listeners from Element
box.replaceWith(box.cloneNode(true));

我们click向元素添加了 2 个事件侦听器。

每次单击该元素时，都会为每个事件侦听器调用一个函数。

为了从所选元素中删除所有事件侦听器，我们使用Node.cloneNode()方法克隆节点并将结果传递给
Element.replaceWith()
方法。

该方法采用的唯一参数cloneNode()是一个布尔值。如果true，则克隆该节点及其子节点。如果设置为，则仅克隆节点。 false

该cloneNode方法复制节点的所有属性及其值，但不复制使用该addEventListener()方法添加的事件侦听器或作为元素属性分配的事件侦听器，例如
element.onclick = function() {}.

该cloneNode方法不会复制内联侦听器。不要使用内联侦听器，而是使用addEventListener方法。

该replaceWith()方法采用一个或多个节点并用提供的节点替换元素。

我们有效地创建了一个没有任何事件侦听器的元素副本，并用克隆元素替换了原始元素。

请注意，此方法还会从元素的子元素中删除所有事件侦听器。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：