web-dev-qa-db-ja.com

Chrome開発ツール/ Firebug / IE開発者ツールバーを使用して、要素の添付/バインドされたイベントを検索します

ページのDOMを検査するとき、要素の添付イベントをすばやく知りたい

たとえば、ボタンにこのHTML DOMがある場合

<button id="button1">Click Me</button>

そしてどこかに(事前に知っている場所ではなく)イベントが添付されています。

$("#button1").click(function(){...});

プログラムで実行できることを知っています( jQueryで要素にバインドされたイベントを見つけることができますか?

しかし、Chrome/Firefox/IEのイベントのリストを表示するには、開発ツールの1つだけを使用する方法がありますか?


Update:新しいバージョンではChrome=バージョンにはタブがありますEventListenersしかし、jQueryは元のイベントをラップするので、イベントのソースまで簡単にドリルダウンすることはできないようです

39
Eran Medan

FireQuery- http://firequery.binaryage.com/ を使用すると、要素にバインドされたイベントを表示して、それらにドリルインできます

0
olore

最初の$( "#button1")要素で最初にアタッチされたハンドラーを取得するには

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

誰も聞きたくない長い物語:プラグインを探してここに来た。 @schmidlopの答えを見てワクワクしましたが、実際に探しているリスナーを提供していないjQueryでは、最終的に特定のコールバックを呼び出すjQueryイベントの汎用ハンドラーを示しています。私はまだChromeプラグインを探しています。このプラグインを使用すると、要素を右クリックして、オブジェクトに接続されているハンドラーをドリルできます。

それはクールだと思います。

PDATE:jQuery Debuggerというchrome拡張機能が見つかりました。単に「要素を検査」し、「要素」サブメニューから「jQueryイベント」を選択してください...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimienter image description here

32
Shanimal

Chromeに[イベントリスナー]タブが追加されました。Event Listeners tab

26
schmidlop

Chromeインスペクターで[要素]タブで要素を選択し、[コンソール]タブでgetEventListeners($0);で要素に関連付けられたイベントを確認できます。

22
Florent2

Firefoxの開発者ツールは、バインドされたイベントを持つ要素の横に「ev」を表示するようになりました。これは、バインドされたイベント(jQueryイベントを含む)の検査に使用できます。

jQuery click documentation の「最初の段落」要素を検査する例を次に示します。

Bound events in Firefox developer tools

3
djsutho

Chromeで利用可能なVisual Eventアドオンを確認することもできます。

1
Gaurav Mishr