web-dev-qa-db-ja.com

jQueryを使用して要素にバインドされたイベントを見つけることができますか？

このリンクで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"を持つ要素にバインドされているすべてのイベントのリストを取得する方法はありますか？

javascriptjqueryjavascript-events
343
Praveen Prasad

最新バージョンの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プロパティを展開したものです）。

Console output for $._

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

496
Sampson

一般的な場合：

  • ヒット F12 Dev Toolsを開く方法
  • Sourcesタブをクリックします
  • 右側でEvent Listener Breakpointsまでスクロールしてツリーを展開
  • 聴きたいイベントをクリックしてください。
  • ターゲット要素と対話します。それらが起動した場合は、デバッガにブレークポイントが表示されます。

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

  • ターゲット要素を右クリック - > "Inspect element"を選択
  • Devフレームの右側を下にスクロールしてください。下部には 'event listeners'があります。
  • ツリーを展開して、どのイベントが要素に添付されているかを確認します。これがバブリングを通して処理されるイベントに機能するかどうかわからない（私はそうではないと思う）
68
Vali Shah

私はこれを後世に追加しています。もっとJSを書く必要のないもっと簡単な方法があります。 Firefox用の 素晴らしいfirebugアドオンを使用する 、

  1. 要素を右クリックして[要素をFirebugで検査]を選択します。
  2. スクリーンショットに示されているサイドバーパネルで、小さい>矢印を使用してイベントタブに移動します。
  3. イベントタブには、イベントと各イベントに対応する機能が表示されます。
  4. その隣のテキストは関数の場所を示しています

enter image description here

11
kakoma

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

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

// Get all event listners bound to the document object
getEventListeners(document);
7
ScottyG

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

6
JohnK

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

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

FF Quantum Dev Tools

2
Chris22

問題の要素ではなく、文書自体にイベントが添付されている可能性があることに注意してください。その場合は、次のものを使います。

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

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

enter image description here

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

enter image description here

2
Pikamander2

次のようなものを使用しました。（$。data（$（ "a.wine-item-link"）[0]）。私の要素が何らかのイベントに結び付けられている場合その要素からすべてのイベントハンドラを接続解除した場合でも、未定義（null）と表示されます。これが私がこれをif式で評価している理由です。

2
Adrian Liew

$._data($('#outerWrap .innerWrap ul li:last a'), 'events')のようにちょっと複雑なDOMクエリを$ ._ dataに渡すと、ブラウザコンソールでは未定義がスローされます。

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

0
giri-jeedigunta