有沒有辦法用 Javascript 找到元素的事件處理程序？

Question

假設你有這個 div：

<div id="foo">bar</div>

你這樣做：

$("#foo").click(someFunction);

在您的 Javascript 代碼中的某個地方。

加載頁面后，有沒有辦法通過 Chrome 中的 firebug 或檢查元素或其他任何方式找出#foo的 click 事件綁定到someFunction ？ 即，無需查看所有代碼即可找到這一點？

Answer 1

Chrome 開發者工具就是這樣做的。

1. 右鍵單擊一個元素
2. 單擊檢查元素
3. 在右側欄中，向下滾動到事件偵聽器

這將為您提供對象上的事件偵聽器列表，可以展開這些事件偵聽器以查找其源和附加功能。

Firebug 在 DOM 選項卡下提供了此信息，但它對用戶不太友好。

Answer 2

您可以在瀏覽器內置的開發人員工具中使用控制台。 它們是 IE 和 Chrome 內置的，而 FF 需要安裝 Firebug AddOn。 我不知道其他瀏覽器。

使用調試器控制台，您可以使用 jQuery data("events")來查詢元素的附加事件。 此外，這些控制台還允許您動態地深入了解您感興趣的事件的任何其他詳細信息。

$("#foo").data("events");

在控制台中執行上述操作將顯示一個對象，該對象具有它找到的每個事件的屬性。 在您的示例中，它返回一個具有存儲所有點擊事件的數組類型的click屬性的對象。

如果您有單擊事件並且只需要該對象，則可以在控制台中執行以下操作：

$("#foo").data("events").click;

每個事件對象都有一個handler屬性，它將顯示它們綁定到的函數：

Object
data: null
guid: 2
handler: function mytestFunction(){
arguments: null
caller: null
guid: 2
length: 0
name: "mytestFunction"
prototype: mytestFunction
__proto__: function Empty() {}
namespace: ""
origType: "click"
quick: null
selector: null
type: "click"
__proto__: Object

請參閱DEMO ，展示如何在控制台中查詢和顯示對象。

或者，您也可以將“處理程序”用於整體摘要對象：

$("#foo").data("handlers");

請注意， .data("events/handlers")將不包括嵌入在 html 中的任何事件，例如：

<div id="foo" onclick="...">bar</div>

有關data()更多信息在文檔中

Answer 3

我不了解 Firefox，但有一種簡單的方法可以在 Chrome 和 Safari 中查看事件偵聽器。 只需打開開發人員工具，選擇您的元素並滾動到 CSS 屬性面板的底部。 您將找到“事件偵聽器”部分。

Answer 4

我建議使用Visual Event 2 。

這是有關如何使用它的說明。 我幾乎每天都使用它，它是一個非常好的工具。