web-dev-qa-db-ja.com

要素を調べてjQueryイベントバインディングを調査する

仮説:ボタン( '#bigButton')があるページを見つけました。クリックすると、jQueryを使用してラマ( 'img#theLlama')がshow()されます。

したがって、buttons.jsのどこか(たとえば、76行目):

$('#bigButton').click(function(){
$('img#theLlama').show();
})

さて、大量の.jsファイルが含まれた大きなHTMLページがあるとします。ボタンをクリックしてラマが表示されるのを確認できますが、上記のコードがどこにあるのかわかりません。

私が探しているソリューションは、FirebugのCSSで利用可能なものと非常に似ています。要素を調べて、このjQueryがbuttons.jsの行76で、この要素の他のバインディングとともに発生することを示してもらいたいと思います。

* 注:報奨金は、「ラマの質問」に対する具体的な回答、つまり上記の解決策を指します。*

FireQueryは多くのjQueryタスクに最適なツールですが、ラマの質問に答えているようには見えません。これについて間違っている場合は、修正してください。

46
jMyles

FirebugFireQuery および this fiddle を使用:

Cmd + Shift + C(要素の検査)を押してボタンをクリックすると、これが明らかになります: Screenshot 1

イベント_Object {click= }_をクリックすると、これが明らかになります(情報を展開した後)

Screenshot 2

function()をクリックすると、これが明らかになります:
Screenshot 3

探しているコードはどれですか?

メモとして、Firebugは常に何かのコード行を見つけることができるとは限りません。この方法は完全に失敗しました!別のアプローチは、名前付き関数式を使用することです。コードを次のように変更します。

_$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})
_

eventsオブジェクトを調べると、これが明らかになります。

alt text

このハンドラーがラマを示していることは明らかであるため、これはfunction()よりもはるかに便利です。また、関数名のコードを検索して見つけることもできます!


Chrome 、組み込みのWebインスペクターと this fiddle を使用:

Cmd + Shift + C(Inspect Element)を押してボタンをクリックすると、これが表示されます:
Screenshot

要素インスペクターのボタンをクリックし、Escキーを押してJSコンソールを開きます。 Screenshot

Chromeコンソールでは、_$0_は要素パネルで選択された要素を参照します。

$._data( $0 )を入力すると、Firebugの例のように、イベントを含むjQuery(内部)データオブジェクトが得られます。悲しいことに、Chromeは関数をクリックできませんが、ソースを見てみましょう:

_<Broken Screenshot link>_


.live() イベントに関する注意:

ライブイベントは$._data( document, "events" )に保存され、関数を指すorigHandlerが含まれます。

_<Broken screenshot link>_

99
gnarf

あなたが求めているインターフェイスを考えると、FireQueryが必要になると思います。 http://firequery.binaryage.com/

これは、Firebugアドオンspecificallyのような領域(jQuery固有のアドオン、データ/イベントに強い)です。

4
Nick Craver

FireQueryは最も便利ですが、手動で行う必要がある場合は、$(element).data('events').click[0].handlerを使用してクリック処理関数への参照を取得できます(もちろん、複数のクリックハンドラーがある場合は必ずしも0ではありません)。そこから、コード内でその関数を見つけるのは、お気に入りのデバッガーまでです。 (名前付き関数を使用すると役立ちます。Firebugは匿名関数を見つけることができますが、多くの場合そうではありません。マウスでその上にカーソルを合わせると、関数の本体が表示されます。)

更新これは、FireQueryでのデータの表示方法です。

HTMLビュー:

jQuery data in Firebug HTML view

コンソール:

jQuery data in Firebug console

0
Tgr

Eventbugは、要素のイベントハンドラーすべてを表示します http://getfirebug.com/releases/eventbug ですが、ハンドラーは一般的なコードです。

0
johnjbarton