Javascript 检测何时将事件添加到元素

如何检测事件处理程序何时添加到元素

---

我看到一篇文章，其中有人在使用大量插件，其中一个插件开始通过添加事件处理程序（如

onkeypress

）四处窥探。我希望能够监视添加到特定元素的事件，或者在添加到特定元素时检测添加的事件。我对DOM本身的更改不感兴趣，只对添加到特定元素的事件处理程序的操作感兴趣。我也不是在谈论事件处理程序的HTML属性版本（例如，

），而是通过

addEventListener

添加的事件。没有框架或库。除了HTML元素（例如，

搜索

输入

元素）之外，没有与此（或相关代码）相关的特定项目，有人可能希望监视某人正在搜索的内容。如果有需要考虑的权限（例如，通过

iframe

或

script

元素设置的内容）。

一种可能是monkeypatch

元素.prototype.addEventListener

（该属性实际上位于

EventTarget.prototype.addEventListener

）。当您的自定义函数运行时，您将知道其他一些JS添加了一个事件侦听器，您可以

调试器

，或

控制台.trace（）

，或抛出一个错误以找出以下位置：

Element.prototype.addEventListener = function(...args) {
  const eventType = args[0];
  if (eventType === 'keypress') {
    console.log('Keypress listener was just added!');
    console.trace();
  }
  return EventTarget.prototype.addEventListener.apply(this, args);
};

Element.prototype.addEventListener=函数（…args）{
const eventType=args[0]；
如果（eventType==='keypress'）{
log（'刚刚添加了按键侦听器！'）；
console.trace（）；
}
返回EventTarget.prototype.addEventListener.apply（此参数为args）；
};
//在其他地方，会添加一个事件侦听器：
button.onclick=（）=>{
input.addEventListener（'keypress'，（）=>{
log（“刚刚触发的按键事件”）；
});
};
添加一个侦听器
这是一个很好的问题，因为我在元素上使用了多个处理程序和emmiter，但从未看到一个元素上有多少个事件处理程序element@JonoJames非常感谢。你是说通过JavaScript本身？虽然我不能坐在每个人的电脑前要求检查他们的DOM，但通过开发工具很容易完成。萝莉，我要试试看！我必须补充一点：我将投票以对抗那些试图投票（试图对抗我的计数器）的人，然后简单地锁定并通知用户出了问题。虽然这真的很吸引人，但已经很晚了，我可能要到明天才能做出正确的反应。感谢您的发帖，在进行了一些有意义的实验后，我会在有可能的时候回复。：-）@John如果有人可以添加运行代码，将事件侦听器添加到您页面上的对象，他们几乎肯定也可以覆盖
addEventListener
，以防止您看到他们添加的内容。@jirassimok在我自己的代码中，我有HTML属性（是的，我知道，虽然我可以管理它们，但不赞成使用这些属性），所以我很少使用addEventListener。因此，我提到了
iframe
和
script
元素。我不知道浏览器允许设置事件有多自由，我相信这是另一个需要问的问题。我欣赏你的洞察力。