javascript - 检测事件何时添加到元素

Question

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

我看到一篇文章，其中有人使用了很多插件，其中一个开始通过添加事件处理程序(例如 onkeypress)来四处窥探。 .我希望能够观察添加到特定元素的事件或检测添加到特定元素时添加的事件。我对 DOM 本身的更改不感兴趣，只是特别关注将事件处理程序添加到特定元素的操作。我也不是在谈论事件处理程序的 HTML 属性版本(例如 <input type="search" onkeypress="" /> )，尽管事件是通过 addEventListener 添加的。 .没有框架或库。除了一个 HTML 元素(如 search)之外，没有涉及此(或相关代码)的特定项目。 input元素为例，有人可能想监视某人正在搜索的内容。如果有应该考虑的权限(例如，通过 iframe 或 script 元素设置的内容)。

Answer 1

一种可能性是对 Element.prototype.addEventListener 进行猴子修补(该属性实际上位于 EventTarget.prototype.addEventListener 上)。当你的自定义函数运行时，你会知道其他一些JS添加了事件监听器，你可以debugger，或者console.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 = 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);
};

// Somewhere else, an event listener gets added:
button.onclick = () => {
  input.addEventListener('keypress', () => {
    console.log('keypress event just fired');
  });
};

<button id="button">Add a listener</button>
<input id="input">

请注意，改变内置原型(prototype)几乎不是一个好主意 - 即使您认为自己做得对，它也可能会破坏某些东西，尤其是当脚本使用库时。虽然此技术可用于调试，但不应出现在生产代码中。

如果您只想查看附加的什么，而不关心何时，您可以检查一个元素并查看它当前有哪些事件监听器: