Question

在Chrome的开发工具中，有一个可爱的界面，您可以在其中查看附加到给定DOM元素的所有事件侦听器，并根据您的需要删除其中任何一个。这是一个截图（为强调增加了箭头）：

我想编写一个Chrome扩展程序，可以自动从任何网页中删除事件监听器（我正在尝试编写Chrome扩展程序以禁用任何试图强制它的网站上的平滑滚动 - 我想删除来自<body>的'wheel'监听器是执行此操作的最直接途径）。是否有任何JavaScript API可用于从Chrome扩展程序访问和修改此事件侦听器列表，还是仅限于开发工具GUI？

要清楚，我知道removeEventListener()，但是这个方法要求你有一个对原始监听器对象的引用 - 我没有这样的引用，所以这个方法不适合我的目的。

Answer 1

事件监听器在window（如您的问题中）或document上注册时，不幸的是，eholder0的答案无效。为此，一种方法是大多数代码和库通常在冒泡阶段注册事件监听器，方法是为useCapture的第三个addEventListener参数传入false（或者根本不传递它）。由于捕获阶段首先发生，因此可以通过注册停止进一步传播的捕获阶段侦听器来阻止调用事件侦听器。

例如，在某个代码评论网站上（以“r”开头，以“eviewable.io”结尾），删除了使用鼠标中键单击通过文档上的mousedown事件滚动的功能，以下内容扩展程序的内容脚本有效：

document.addEventListener("mousedown", function (event) {
    event.stopPropagation();
}, true);

注意第三个参数是true来注册捕获阶段事件监听器。另请注意，它不调用event.preventDefault()，因此保留了浏览器内置的滚动功能。

Answer 2

不幸的是，由于事件监听器的实现方式，这并非易事。您可以使用一些库来记录调用以添加事件侦听器，从而为您提供删除的引用。如果没有使用它们或滚动自己，那么这不是一个匿名删除它们的简单工具。

然而，您可以执行一些有效删除所有侦听器的操作，即克隆元素并将其替换为克隆。克隆不会保留元素或其子元素上的任何侦听器，但它会保留所有属性。以下是如何执行此操作的示例：

var elem = document.getElementById('foo'),
clone = elem.cloneNode(true);
elem.parentNode.replaceChild(clone, elem);

我可以使用Chrome扩展程序删除事件监听器吗？

2 个答案: