374

このリンクで 2 つのイベント ハンドラーをバインドします。

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

要素にバインドされたすべてのイベントのリストを取得する方法はありますid="elm"か?

4

9 に答える 9

536

jQuery の最新バージョンでは、$._dataメソッドを使用して、jQuery によって問題の要素に関連付けられたイベントを検索します。注、これは内部使用のみの方法です。

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

からの結果は$._data、設定した両方のイベントを含むオブジェクトになります (以下の図では、mouseoutプロパティが展開されています)。

$._ のコンソール出力

次に、Chrome でハンドラー関数を右クリックし、[関数定義の表示] をクリックして、コード内で定義されている正確な場所を表示します。

于 2010-01-05T19:48:01.553 に答える
81

一般的なケース:

  • ヒットF12して開発ツールを開きます
  • Sourcesタブをクリック
  • 右側で、 まで下にスクロールしEvent Listener Breakpoints、ツリーを展開します
  • リッスンするイベントをクリックします。
  • ターゲット要素と対話します。それらが起動すると、デバッガーでブレークポイントが取得されます

同様に、次のことができます。

  • 対象の要素を右クリック-> 「Inspect element」を選択
  • 開発フレームの右側を下にスクロールすると、下部に「event listeners」があります。
  • ツリーを展開して、要素に関連付けられているイベントを確認します。これがバブリングによって処理されるイベントで機能するかどうかはわかりません (私はそうではないと思います)
于 2015-02-09T18:11:13.210 に答える
12

javascript 関数 getEventListeners() を使用して、オブジェクトにバインドされたイベント リスナーのリストを簡単に取得できるようになりました。

たとえば、開発ツール コンソールで次のように入力します。

// Get all event listners bound to the document object
getEventListeners(document);
于 2018-07-12T17:23:56.313 に答える
6

jQuery Audit プラグイン プラグインを使用すると、通常の Chrome Dev Tools でこれを行うことができます。完全ではありませんが、一般的な jQuery ハンドラーだけでなく、要素/イベントにバインドされた実際のハンドラーを確認できるはずです。

于 2014-03-26T14:08:22.980 に答える
4

イベントは、問題の要素ではなく、ドキュメント自体に添付される場合があることに注意してください。その場合、次を使用する必要があります。

$._data( $(document)[0], "events" );

そして、正しいセレクターでイベントを見つけます:

ここに画像の説明を入力

そして、ハンドラ> [[FunctionLocation]]を見てください。

ここに画像の説明を入力

于 2018-05-20T02:10:22.973 に答える
3

これは jQuery セレクター/オブジェクトに正確に固有のものではありませんが、FireFox Quantum 58.x では、開発ツールを使用して要素のイベント ハンドラーを見つけることができます。

  1. 要素を右クリック
  2. コンテキスト メニューで、[要素の検査] をクリックします。
  3. 要素 (黄色のボックス) の横に「ev」アイコンがある場合は、「ev」アイコンをクリックします。
  4. その要素とイベント ハンドラのすべてのイベントを表示します

FF Quantum 開発ツール

于 2018-02-26T22:15:35.097 に答える
1

少し複雑な DOM クエリを $._data に次のように渡す$._data($('#outerWrap .innerWrap ul li:last a'), 'events')と、ブラウザー コンソールで undefined がスローされます。

$._data($('#outerWrap')[0], 'events')したがって、a タグのイベントを表示するには、親 div: で $._data を使用する必要がありました。これは同じ JSFiddle です: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

于 2014-03-14T07:49:03.773 に答える