如何找出哪些JavaScript事件觸發？

100

<select id="filter"> 
    <option value="Open" selected="selected">Open</option> 
    <option value="Closed">Closed</option> 
</select>

當我選擇Closed頁面重新加載。在這種情況下，它顯示關閉的票證（而不是打開的）。當我手動執行它時，它工作正常。

的問題是，當我選擇Closed與Watir的頁面不會重新加載：

browser.select_list(:id => "filter").select "Closed"

這通常意味着一些JavaScript事件，不會觸發。我可以用Watir發射事件：

browser.select_list(:id => "filter").fire_event "onclick"

但我需要知道要觸發哪個事件。

有沒有辦法找出哪些事件是爲一個元素定義的？

來源

2010-09-24 Željko Filipin

此問題列出了更多工具：http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool – 2010-09-24 14:11:09

Visual Event，http： //www.sprymedia.co.uk/article/Visual+Event。我相信，這將有助於一半人登陸這個stackoverflow頁面:) – Cedric 2012-07-25 01:40:17

111

貌似Firebug（Firefox插件）給出了答案：

打開Firebug
右鍵單擊HTML選項卡中的元素
點擊Log Events
使控制檯選項卡
點擊堅持在控制檯選項卡中（否則在重新加載頁面後，Console選項卡將清除）
select Closed（手動）

會有這樣的事情在控制檯選項卡：

... 
mousemove clientX=1097, clientY=292 
popupshowing 
mousedown clientX=1097, clientY=292 
focus 
mouseup clientX=1097, clientY=292 
click clientX=1097, clientY=292 
mousemove clientX=1096, clientY=293 
...

來源：Firebug Tip: Log Events

來源

2010-09-24 13:32:02

非常感謝，我不知道那個Firebug功能。也許我需要一段時間實際RTFM。 – 2010-09-24 13:36:10

直到幾分鐘前我才知道它。我一直在寫這個問題，並且一路上找到了答案。 :) – 2010-09-24 13:39:55

你的問題看起來很像我的（自我回應，有自我評論）。 – vol7ron 2011-09-05 02:17:28

106

只是覺得應該補充一點，你可以在Chrome做到這一點，以及：

按Ctrl +移+I（開發人員工具）> Sources>事件偵聽器斷點（在右側）。

您還可以通過右鍵單擊元素並瀏覽其屬性（右側面板）來查看已附加的所有事件。

例如：

右擊給予好評按鈕向左

選擇檢查元素

摺疊樣式段（最右側部分 - 雙V形）

展開事件監聽器選項

現在你可以看到積極的事件

不知道它是否像螢火蟲選項一樣強大，但已經足夠我的大部分東西。

另一種選擇就是有點不同，但令人驚訝的是真棒視覺事件： http://www.sprymedia.co.uk/article/Visual+Event+2

它強調所有已綁定並具有popovers顯示，被稱爲功能頁面上的元素。相當漂亮的書籤！還有一個Chrome插件，如果這是更多的東西 - 不知道其他瀏覽器。

AnonymousAndrew亦指出monitorEvents(window);here

來源

2011-09-05 02:02:01 Chris

我無法弄清楚如何使用您建議的任何一種方式查看哪些事件觸發。 – 2012-02-18 22:43:43

更新：它不是開發工具（或檢查器）內的'Scripts'，你必須進入Sources，然後看右邊的菜單。 – aledalgrande 2014-05-01 00:30:22

@aledalgrande謝謝，已更新。（對於任何人閱讀，這隻適用於第一個解決方案，第二個仍然使用檢查員）。 – Chris 2014-05-01 05:08:12

關於鉻，檢出通過命令行API的monitorEvents（）。

通過菜單>工具> JavaScript控制檯打開控制檯。
輸入monitorEvents(window);

查看控制檯的事件

... 
mousemove MouseEvent {dataTransfer: ...} 
mouseout MouseEvent {dataTransfer: ...} 
mouseover MouseEvent {dataTransfer: ...} 
change Event {clipboardData: ...} 
...

裏有documentation其他例子淹沒。我猜這個功能是在上一個答案之後添加的。

來源

2013-11-05 16:18:08 AnonymousAndrew

不錯！結合jQuery：'monitorEvents（$（'＃element'）。get（））' – Klaus 2016-02-18 14:44:38

如何找出哪些JavaScript事件觸發？

回答

相關問題