Question

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

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

我想看一下如何添加Element的事件处理程序（以及何时添加）

我在Chrome调试器（Dev工具）>元素中找到了它，然后选择“中断属性修改”。调试器永不中断。

我还选择了它的父Div（位于其内）并设置Debugger（在Element上单击鼠标右键）>中断子树修改。再次，它永不中断。

我在这里做什么错了？

Answer 1

添加事件侦听器通常不是属性更改-而是通常是对addEventListener或on-分配的调用。因此，收听属性更改将无效。

一个选择是猴子补丁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');
});

<div>click me</div>

Answer 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);

它将事件myListener1和myClick2函数添加到事件侦听器数组中以进行单击，并在添加时按顺序执行。

您可以使用事件目标的原型来猴子修补事件听众阵列。

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

2 个答案: