jQuery要素にバインドされたイベントハンドラーのリストを取得するにはどうすればよいですか?

jQuery を使用して要素にバインドされたイベント ハンドラーを取得する方法

Web 開発の分野では、jQuery は開発者が次のことを可能にすることでイベント処理を簡素化します。イベントリスナーを要素に簡単にバインドします。ただし、単一の要素で複数のイベントを管理することは、特にトラブルシューティングやデバッグの場合に困難になることがあります。

よくある質問の 1 つは、現在特定の要素にバインドされているすべてのイベントのリストを取得する方法です。これは最も一般的に使用される機能ではないかもしれませんが、特定のシナリオではこの手法を知っておくと非常に役立ちます。

$._data イベント ハンドラーを取得するメソッド

最近のバージョンjQuery の $._data メソッドは、jQuery によってバインドされたイベントなど、要素に関連付けられた内部データにアクセスする手段を提供します。このメソッドは主に内部使用を目的としていますが、要素に関連付けられたイベントを取得する方法も提供します。

次のコード スニペットを考えてみましょう:

$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

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

このコードを実行すると、オブジェクトが生成されます。要素「foo」にバインドした 2 つのイベントが含まれています。

$._data についてOutput

$._data の結果は、バインドされたイベントに関する情報を含むオブジェクトになります。オブジェクト内の各プロパティは、「クリック」や「マウスアウト」などのイベント タイプを表します。各プロパティの値は、そのイベント タイプに関連付けられたイベント ハンドラーの配列になります。

たとえば、Chrome デバッガーで「mouseout」プロパティを展開すると、次のようなものが表示されます。

mouseout: [
  {
    handler: function...
  }
]

Chrome のその他のデバッグ オプション

に加えて、 $._data メソッドに加えて、Chrome には便利なデバッグ オプションが用意されています。ハンドラー関数を右クリックして [関数定義の表示] を選択すると、コード内でハンドラーが定義されている正確な場所を特定できます。これは、アプリケーションのトラブルシューティングを迅速に行ったり、イベント処理のフローを理解したりする場合に特に役立ちます。

以上がjQuery要素にバインドされたイベントハンドラーのリストを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。