如何查看Chrome DevTools中某個元素上觸發的事件？

我從庫的頁面上有一個可自定義的表單元素。 我想查看與之交互時觸發了哪些javascript事件，由於我試圖找出要使用的事件處理程序。

如何使用Chrome Web Developer作到這一點？

---

#1樓

• 點擊F12打開開發工具
• 點擊來源標籤
• 在右側，向下滾動到「事件偵聽器斷點」，而後展開樹
• 單擊您想聽的事件。
• 與目標元素進行交互，若是它們觸發，您將在調試器中獲得一個斷點

一樣，您能夠右鍵單擊目標元素->選擇「檢查元素」。在開發框架的右側向下滾動，底部是「事件偵聽器」。 展開樹以查看將哪些事件附加到元素。 不知道這是否適用於經過冒泡處理的事件（我猜不是）

---

#2樓

若是它是一個jquery插件，則不會顯示您的腳本可能建立的自定義事件。 例如 ：

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Chrome開發人員工具中「腳本」下的「事件面板」不會顯示「 Something：custom-event-one」

---

#3樓

您能夠使用monitorEvents函數。

只需檢查您的元素（ right mouse click → Inspect可見元素，或轉到Chrome開發者工具中的「 Elements標籤並選擇所需的元素），而後轉到「 Console標籤並輸入：

monitorEvents($0)

如今，當您將鼠標移到該元素上，進行焦點或單擊時，將觸發事件的名稱及其數據。

要中止獲取此數據，只需將其寫入控制檯：

unmonitorEvents($0)

$0只是Chrome開發者工具選擇的最後一個DOM元素。 您能夠在那裏傳遞任何其餘DOM對象（例如getElementById或querySelector結果）。

您還能夠將事件「類型」指定爲第二個參數，以將監視的​​事件縮小到某個預約義的集合。 例如：

monitorEvents(document.body, 'mouse')

這些可用類型的列表在這裏 。

我作了一個小gif，說明了此功能的工做原理：

---

#4樓

Visual Event是一個不錯的小書籤，可用於查看元素的事件處理程序。 在線演示能夠在這裏查看。

---

#5樓

對於jQuery（至少是1.11.2版），如下過程對我有用。

1. 右鍵單擊該元素，而後打開「 Chrome開發者工具」
2. 鍵入$._data(($0), 'events'); 在「控制檯」中
3. 展開附加的對象，而後雙擊handler:值。
4. 這顯示了附加功能的源代碼，使用「搜索」選項卡搜索其中一部分。

如今是時候中止從新發明輪子了，開始使用原始JS事件... :)