我可以以编程方式检查和修改 html 元素上的 Javascript 事件处理程序吗？答案

【问题标题】：can I programmatically examine and modify Javascript event handlers on html elements?我可以以编程方式检查和修改 html 元素上的 Javascript 事件处理程序吗？
【发布时间】：2009-09-17 05:22:35
【问题描述】：

我正在使用 C# 进行浏览器自动化，我想修改或可能只是消除我正在查看的网页中某些 html 元素上的事件处理程序。例如，假设那里有一个按钮，它可能（或可能没有）附加 onClick 事件。我该怎么做： - 找出是否有任何事件处理程序附加到 onClick？ - 删除它们？

【问题讨论】：

查看相关：stackoverflow.com/questions/570960/…
还有：stackoverflow.com/questions/446892/…

标签： javascript events browser

【解决方案1】：

用它自己的克隆替换元素应该有效地丢弃它的所有事件监听器（好吧，从技术上讲，监听器仍然在一个元素上，但是由于一个元素被它自己的克隆替换，它看起来好像侦听器被简单地删除）：

el.parentNode.replaceChild(el.cloneNode(true), el);

不幸的是，这在 IE 中不起作用，因为 IE 在克隆时错误地传输元素的事件侦听器。要解决这个问题，您可以重新分配元素的 innerHTML 的 parentNode：

el.parentNode.innerHTML = el.parentNode.innerHTML;

请注意，这不仅会删除元素的事件监听器，还会删除元素所有兄弟姐妹的监听器。

或者，您可以通过重新分配元素的outerHTML 来解决 IE 问题：

el.outerHTML = el.outerHTML;

【讨论】：

哇，不知道那个 IE 错误。那是一种痛苦！

【解决方案2】：

这取决于事件处理程序是如何附加到元素的。

如果它们是使用 addEventListener 或专有的 addWhatever 侦听器方法之一附加的，则无法列出它们。

如果它们是通过修改事件属性附加的，即。 node.onclick = 不管，然后你可以读取属性的值来获取函数，它会像任何其他 JS func 一样工作。

还有第三种方式：

如果您自动化的代码使用默认的 addEventHandler/addListener 行为，您可以覆盖这些行为。通过这样做，您可以将默认行为替换为将每个处理程序推送到一个数组中，然后您可以自己循环。

以下代码可能有效：

var oldAddEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function(event, handler, bubbling) {
    /* do whatever you want with event parameters */

    oldAddEventListener.call(this, event, handler, bubbling);
}

【讨论】：

据我所知 addEventListener 在某些浏览器中有效，如果您可以为其他浏览器扩展您的解决方案，那就太好了。
这种方法适用于符合标准的浏览器，例如 Firefox、Opera 和可能基于 Webkit 的浏览器。 Internet Explorer 不支持 HTMLElement.prototype，因此，在其中做同样的事情有点棘手。您可能可以遍历文档中的每个节点并替换 addListener 或类似的东西。
这是否是一个好主意取决于您编写的代码类型。如果代码不需要并且永远不需要与其他代码配合使用，那么它就没有那么重要了。此外，对于更专业的目的（例如这里的那个），没有那么多方法。
@Jani 这与第 3 方代码无关。它与您的代码运行的环境有关。事实是，扩展宿主对象本质上是一个坏主意，因为宿主对象的行为不可预测（但完全符合标准）。在受控环境中扩展它们可能没问题，但在一般网络环境中，它实际上是在自取其辱。
@JaniHartikainen 这在控制台上运行时工作得非常好，但当它是内容脚本的一部分时（Firefox 85）就不行了。我知道内容脚本无法访问所有 Web 扩展 API，但是，AFAIK，addEventListener 是内容脚本应该能够使用的 DOM API 的一部分。因此，我希望它也可以在内容脚本中工作。我错过了什么吗？

【解决方案3】：

据我所知，目前无法使用 javascript 来获取附加到元素的所有事件处理程序。

【讨论】：

不，您不能通过将 null 分配给事件来删除所有事件处理程序。例如，使用addEventListener/attachEvent 添加的事件不受影响。