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

427

我在庫中的頁面上有一個可自定義的表單元素。我想查看當我與它交互時發生了什麼JavaScript事件，因爲我試圖找出使用哪個事件處理程序。如何查看在Chrome DevTools中的元素上觸發的事件？

我該如何使用Chrome Web Developer？

來源

2012-04-18 John Hoffman

+11

這個書籤可以幫助：http://www.sprymedia.co .uk/article/Visual + Event + 2 – scytale 2012-10-10 12:11:16

這裏的答案很有價值，但上面的小書籤實際上是解決了我的問題。 http://www.sprymedia.co.uk/article/Visual+Event+2 – Jazzy 2014-07-15 20:39:55

693

命中F12打開開發工具
單擊源選項卡
在右手邊，向下滾動到「事件監聽器斷點」，並展開樹
點擊事件，你想聽。
交互目標元素，如果他們解僱你會在調試器中拿到一個破發點

同樣，你可以用鼠標右鍵單擊目標元素 - >選擇「檢查元素」右側向下滾動的開發框架，底部是'事件監聽者'。展開樹以查看附加到元素的事件。不知道這是否適用於通過冒泡處理的事件（我猜不是）

來源

2012-04-18 16:29:12 Matt

這個解決方案是一個問題，如果它是鼠標事件後，因爲斷點殺死流程 – WendyG 2014-05-14 13:11:54

+47

如果所有事件指向縮小jquery i不關心，我如何達到使用該jQuery的功能。 – 2014-10-01 19:15:27

+10

它可以顯示由我創建的自定義事件嗎？當我讀到它改變了我的第一個想法的生活。我想念什麼？ – Tebe 2014-10-24 08:06:38

這不會顯示像腳本可能創建的自定義事件，如果它是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開發者工具腳本事件面板不會告訴你「的東西：自定義事件 - 一個」

來源

2012-07-15 23:42:22 airtonix

+14

那麼，如何找到這些事件呢？ – Calydon 2015-11-21 00:45:51

565

可以使用monitorEvents功能。

只是檢查你的元素（right mouse click→Inspect可見元件上，或者去Elements標籤在Chrome開發者工具，並選擇想要的元素），然後去Console選項卡，並寫上：

monitorEvents($0)

現在，當您在移動鼠標這個元素，關注或者點擊它，被觸發的事件的名字將和它的數據一起顯示。

停止收到這個數據只是寫這個安慰：

unmonitorEvents($0)

$0只是通過Chrome開發者工具上次選擇的DOM元素。您可以在那裏傳遞任何其他DOM對象（例如，結果爲getElementById或querySelector）。

您還可以指定事件「type」作爲第二個參數，以將受監視事件的範圍縮小到某個預定義集合。例如：

monitorEvents(document.body, 'mouse')

這種可用類型的列表是here。

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

usage of monitorEvents function

來源

2013-04-10 10:50:36

+26

這個答案是好多了，並且確實問到了什麼（可能該功能在2012年不可用） – llamerr 2014-04-02 11:09:34

這應該是新接受的答案 – jpwynn 2015-02-26 20:21:20

同意。這是監視和追蹤* specific *元素事件的事實方式。 – dmackerman 2015-04-10 18:49:35

Visual Event是一個可愛的小書籤，你可以用它來查看元素的事件處理程序。在線演示可以查看here。

來源

2014-03-21 20:12:51 arwan

它不能用作瑞士軍隊的工具。從我的觀點來看，這是爲了新手。 – 2016-02-26 06:14:57

也可作爲Chrome擴展程序使用：https：//chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim – pelms 2017-02-16 14:50:14

感謝它爲我工作得很好 – 2017-08-08 20:34:12

對於jQuery（至少版本1.11.2），以下過程適用於我。

在「控制檯」
展開附着物右鍵單擊元素並打開「Chrome開發者工具」
類型$._data(($0), 'events');並雙擊handler:值。
這顯示了附加功能的源代碼，使用「搜索」選項卡搜索部分內容。

是時候停止重新發明輪子，並開始使用香草JS事件... :)

來源

2016-07-14 15:11:53

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

回答

相關問題