12

あなたがこのdivを持っているとしましょう：

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

そして、あなたはこれを行います：

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

Javascriptコード内のどこかに。

ページが読み込まれたら、FirebugやChromeの要素の検査などを介して、のクリックイベント#fooがバインドされていることを確認する方法はありますsomeFunctionか？つまり、すべてのコードを調べなくても、これを見つけることができますか？

4

4 に答える 4

16

Chromeデベロッパーツールがこれを行います。

  1. 要素を右クリック
  2. [要素の検査]をクリックします
  3. 右側の列で、イベントリスナーまで下にスクロールします

これにより、ソースとアタッチされた関数を見つけるために展開できるオブジェクトのイベントリスナーのリストが表示されます。

Firebugの[DOM]タブにこの情報がありますが、ユーザーフレンドリーではありません。

于 2012-08-08T11:25:27.937 に答える
7

コンソールは、ブラウザの組み込み開発ツールで使用できます。これらはIEとChromeに組み込まれていますが、FFにはFirebugアドオンをインストールする必要があります。他のブラウザについては知りません。

デバッガコンソールを使用すると、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

コンソールでオブジェクトを照会および表示する方法を示す「デモ」を参照してください。

または、サマリーオブジェクト全体に「ハンドラー」を使用することもできます。

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

ただし、.data("events/handlers")次のようなhtmlに埋め込まれた有線のイベントは含まれないことに注意してください。

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

詳細についてdata()は、ドキュメントを参照してください

于 2012-08-08T11:20:43.227 に答える
2

を使用することをお勧めしVisual Event 2ます。

使い方はこちらです。私はほとんど毎日それを使用し、それは非常に良いツールです。

于 2012-08-08T11:36:01.907 に答える
2

Firefoxについてはわかりませんが、ChromeとSafariでイベントリスナーを簡単に確認する方法があります。開発ツールを開き、要素を選択して、CSSプロパティパネルの一番下までスクロールします。「イベントリスナー」セクションがあります。

于 2012-08-08T11:25:47.947 に答える