如何找到添加了自定义事件侦听器的位置？答案

【问题标题】：How to find where a custom event listener has been added?如何找到添加了自定义事件侦听器的位置？
【发布时间】：2015-02-17 16:47:21
【问题描述】：

在页面上的“友好”iframe 中运行了第 3 方代码。代码可能会也可能不会将它自己的自定义事件之一添加到外部页面上的任何元素，或页面上某处的 iframe 之一（在它们的窗口、文档或 dom 元素上）。

我知道自定义事件的名称，但如何知道监听器添加到了哪里？

【问题讨论】：

查看 iframe 沙盒 html5rocks.com/en/tutorials/security/sandboxed-iframes
为什么需要知道在哪里添加它？
不确定这是否可以仅通过 javascript 实现，但您可以使用 Chrome 开发工具。检查您怀疑附加了事件侦听器的元素，并在“样式”选项卡旁边找到“事件侦听器”选项卡。
@Halcyon 我还想为同一个事件添加一个监听器，所以在我的代码中我可以在该事件被触发时做一些事情。
@NikolaDimitroff 谢谢，但我试图避免以这种方式遍历所有数百个元素。随着我的工作，dom 也在发生变化，所以我不确定我是否错过了什么。

标签： javascript dom events dom-events

【解决方案1】：

这是一个选项 - 覆盖标准实现：

var addEventListenerImplementation = Node.prototype.addEventListener;

Node.prototype.addEventListener = function (event, callback) {
    alert("Hey, someone attached an event handler to me");
    addEventListenerImplementation.call(this, event, callback);
};

document.getElementById("div").addEventListener("click", function () {
  alert("clicked");
});

div {
    background: red;
    width: 300px;
    height: 300px;
}

&lt;div id="div"/&gt;

这在大多数情况下应该有效，但不幸的是 addEventListener 不是附加事件的唯一方法，因此您可能还需要覆盖 Event.prototype.observe。最后，如果事件处理程序是使用element.onclick 或任何其他onevent 函数附加的，则您无法真正覆盖它们。一种可能的解决方案是：

在Node.prototype 上定义一个新属性。 Object.defineProperty(Node.prototype, "ONMYCLICK", function () { get: function () { return null; }, set: function (handler) { console.log("Hey, a handler was attached!"); this.onclick = handler; } });
在您喜欢的文本编辑器中打开库的脚本并将所有出现的.onclick 替换为.ONMYCLICK
???
利润

【讨论】：