javascript - 如何查看事件处理程序被添加到元素中？

Question

我遇到了一个错误，看起来是由附加了点击事件的事件处理程序引起的:

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

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

我在 Chrome 调试器(开发工具)> 元素中找到了它，然后选择“属性修改时中断”。调试器永远不会中断。

我还选择了它的父 Div(它位于其中)并设置调试器(右键单击元素)> 在子树修改上中断。再说一次，它永远不会中断。

我在这里做错了什么？

Answer 1

添加事件监听器(通常)不是属性更改，而是通常调用 addEventListener 或 on 赋值。因此，监听属性变化是行不通的。

一种选择是对addEventListener进行monkeypatch，以便在使用匹配参数调用addEventListener时运行debugger。例如:

// 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');
});

<div>click me</div>