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

Question

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

我碰到一篇文章，其中有人在使用许多插件，其中一个插件通过添加事件处理程序（例如onkeypress）开始窥探。我希望能够监视添加到特定元素的事件，或者检测将事件添加到特定元素时正在添加的事件。我对DOM本身的更改不感兴趣，仅对添加到特定元素的事件处理程序的动作特别感兴趣。尽管通过<input type="search" onkeypress="" />添加了事件，但我也不是在谈论事件处理程序的HTML属性版本（例如addEventListener）。没有框架或库。除了一个search input元素之类的HTML元素（例如，某人可能想要监视某人正在搜索的内容）之外，没有其他与此项目（或相关代码）相关的特定项目。如果有权限（例如，通过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">

请注意，对内置原型进行变异几乎绝不是一个好主意-即使您认为自己做对了，也可能会破坏事情，尤其是当脚本使用库时。虽然可以将该技术用于调试，但是它不应出现在生产代码中。

如果您只想查看附有什么，而实际上并不关心何时，则可以检查一个元素并查看其当前具有的事件侦听器：