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

Question

我有一個錯誤，看起來像是由附加了click事件的事件處理程序引起的：

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

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

我在Chrome調試器（Dev Tools）>元素中找到了它，然后選擇“中斷屬性修改”。 調試器永不中斷。

我還選擇了它的Parent Div（位於其中）並設置Debugger（右鍵單擊Element）>中斷子樹修改。 再一次，它永遠不會中斷。

我在這里做錯了什么？

Answer 1

添加一個事件監聽器不是一個屬性的變化（通常） -更確切地說，通常這是一個呼叫addEventListener或on -分配。 因此，偵聽屬性更改將不起作用。

一種選擇是monkeypatch addEventListener以便在使用匹配參數調用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> 

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函數添加到事件偵聽器數組中以進行單擊，並在添加時按順序執行。

並且您可以使用事件目標的原型來猴子修補事件主持人陣列。