HTML/JS：如何跟蹤事件處理程序和相應的文件

Question

我需要跟蹤與HTML DOM元素的每個事件相關的每個事件處理程序，例如Chrome或Firefox等瀏覽器中的Button。我也想知道哪個文件包含event-handler function。

我工作在Rails框架和jQuery。我有很多JS文件來管理。當客戶端的某些事情出錯時，它很難找到culprit。

在這方面有人能幫助我嗎？

Answer 1

您可以使用Chrome開發工具查找添加到任何元素的事件偵聽器，如下所示。

1. 右鍵單擊您想檢查元素（例如，一些按鈕）
2. 選擇「檢查元素」在上下文菜單
3. 選擇「事件監聽器」選項卡（如圖所示在屏幕截圖中爲1）
4. 要過濾僅綁定到所選元素的監聽器，請將過濾器設置爲「僅限選定節點」（屏幕截圖中顯示爲2）
5. 單擊右下角中顯示的鏈接列的t列到達偵聽器源代碼。 （如圖3中的截圖）

參見：https://developer.chrome.com/devtools/docs/dom-and-styles#viewing-element-event-listeners