41

ページの DOM を検査するときに、要素に関連付けられているイベントをすばやく知りたい

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

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

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

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

プログラムで実行できることはわかっています（jQueryを使用して要素にバインドされたイベントを見つけることができますか？）

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

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

4

6 に答える 6

35

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

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

JSFiddle

誰も聞きたくない長い話: プラグインを探してここに来ました。@schmidlop の回答を見てわくわくしましたが、探しているリスナーを実際に提供しない jQuery では、最終的に特定のコールバックを呼び出す jQuery イベントの汎用ハンドラーが表示されるだけです。要素を右クリックして、オブジェクトにアタッチされたハンドラーにドリルダウンできるようにする Chrome プラグインをまだ探しています。

それはクールだろう原因。

更新: jQuery Debugger という chrome 拡張機能を見つけました。「要素を検査」し、「要素」サブメニューから「jQuery イベント」を選択するだけです... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimiここに画像の説明を入力

于 2014-02-06T05:01:44.873 に答える
28

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

于 2014-01-21T04:41:41.133 に答える
22

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

于 2013-09-18T18:19:36.013 に答える
0

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

于 2012-07-14T23:43:30.953 に答える