ページのDOMを検査するとき、要素の添付イベントをすばやく知りたい
たとえば、ボタンにこのHTML DOMがある場合
<button id="button1">Click Me</button>
そしてどこかに(事前に知っている場所ではなく)イベントが添付されています。
$("#button1").click(function(){...});
プログラムで実行できることを知っています( jQueryで要素にバインドされたイベントを見つけることができますか? )
しかし、Chrome/Firefox/IEのイベントのリストを表示するには、開発ツールの1つだけを使用する方法がありますか?
Update:新しいバージョンではChrome=バージョンにはタブがありますEventListenersしかし、jQueryは元のイベントをラップするので、イベントのソースまで簡単にドリルダウンすることはできないようです
FireQuery- http://firequery.binaryage.com/ を使用すると、要素にバインドされたイベントを表示して、それらにドリルインできます
最初の$( "#button1")要素で最初にアタッチされたハンドラーを取得するには
$._data($("#button1").get(0),"events").click[0].handler
誰も聞きたくない長い物語:プラグインを探してここに来た。 @schmidlopの答えを見てワクワクしましたが、実際に探しているリスナーを提供していないjQueryでは、最終的に特定のコールバックを呼び出すjQueryイベントの汎用ハンドラーを示しています。私はまだChromeプラグインを探しています。このプラグインを使用すると、要素を右クリックして、オブジェクトに接続されているハンドラーをドリルできます。
それはクールだと思います。
PDATE:jQuery Debuggerというchrome拡張機能が見つかりました。単に「要素を検査」し、「要素」サブメニューから「jQueryイベント」を選択してください...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi
Chromeに[イベントリスナー]タブが追加されました。
Chromeインスペクターで[要素]タブで要素を選択し、[コンソール]タブでgetEventListeners($0);
で要素に関連付けられたイベントを確認できます。
Firefoxの開発者ツールは、バインドされたイベントを持つ要素の横に「ev」を表示するようになりました。これは、バインドされたイベント(jQueryイベントを含む)の検査に使用できます。
jQuery click documentation の「最初の段落」要素を検査する例を次に示します。
Chromeで利用可能なVisual Eventアドオンを確認することもできます。