如何查看添加到元素的事件处理程序？答案

【问题标题】：How can I watch Event Handlers being added to an Element?如何查看添加到元素的事件处理程序？
【发布时间】：2018-09-20 12:09:59
【问题描述】：

我有一个错误，看起来是由附加点击事件的事件处理程序引起的：

 mxpnl.track_links("#pagebody a", "Click.body");

我想看看该元素的事件处理程序是如何添加的（以及何时添加）

我在 Chrome Debugger (Dev Tools) > Elements 中找到它，然后选择 Break on Attribute modify。调试器永不中断。

我还选择了它的 Parent Div（它在其中）并设置 Debugger（右键单击 Element）> break on subtree 修改。同样，它永远不会中断。

我在这里做错了什么？

【问题讨论】：

标签： javascript google-chrome-devtools

【解决方案1】：

添加事件监听器不是属性更改（通常） - 相反，通常它是对 addEventListener 或 on- 分配的调用。所以，监听属性变化是行不通的。

一个选项是monkeypatch addEventListener 以便debugger 在使用匹配参数调用addEventListener 时运行。例如：

// snippet might not actually enter the debugger due to embedded sandboxing issues

const nativeEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(...args) {
  if (this.matches('div') && args[0] === 'click') {
    console.log('listener is being added to a div');
    debugger;
  }
  nativeEventListener.apply(this, args);
}



// then, when an event listener is added, you'll be able to intercept the call and debug it:

document.querySelector('div').addEventListener('click', () => {
  console.log('clicked');
});

&lt;div&gt;click me&lt;/div&gt;

【讨论】：

这是否也捕获on 分配？
不，为此，您必须使用monkeypatch HTMLElement.prototype.onclick
感谢您为我指明正确的方向。我试图复制这个来做到这一点，遇到了一个错误，但我的谷歌搜索让我无处可去。我一开始不知道如何保存onclick 的原生值。你知道如何获取属性的 setter/getter 吗？我对此提出了一个问题：stackoverflow.com/q/62238373/3310334

【解决方案2】：

如果用非常简单的术语解释，那么事件侦听器只是一个函数，它通过引用字符串（例如“click”和“on”等）添加到数组中。

所以当你说.....

  function myClick1(){
  console.log('myclick1 called');
}  
 document.querySelector('mydiv').addEventListener('click', myClick1);
    function myClick2(){
          console.log('myclick2 called');
        }
document.querySelector('mydiv').addEventListener('click', myClick2);

它在事件监听器数组中添加函数 myClick1 和 myClick2 以便单击并在添加时按顺序执行。

您可以使用事件目标的原型来修补事件侦听器数组。

【讨论】：