DOM要素の添付イベントハンドラーを検査する

DOM要素のイベントに関連付けられている関数/コードを表示する方法はありますか？Firebugまたはその他のツールを使用する。

従来のelement.onclick= handlerまたはHTML を使用して接続されたイベントハンドラーは、スクリプトまたはデバッガーのプロパティから<element onclick="handler">簡単に取得できelement.onclickます。

DOM Level 2 Events addEventListenerメソッドとIE を使用して接続されたイベントハンドラーattachEventは、現在スクリプトからまったく取得できません。DOMレベル3はかつてelement.eventListenerListすべてのリスナーを取得することを提案しましたが、これが最終的な仕様になるかどうかは不明です。現在、どのブラウザにも実装されていません。

ブラウザー拡張機能としてのデバッグツールは、この種のリスナーにアクセスできますが、実際にそうするものは知りません。

一部のJSフレームワークは、イベントバインディングのレコードを十分に残して、これまでの状況を把握します。Visual Eventはこのアプローチを採用して、いくつかの一般的なフレームワークを通じて登録されたリスナーを発見します。

Google ChromeデベロッパーツールのElements Panelには、2011年半ばのChromeのリリース以降、2010年以降のChromeデベロッパーチャンネルのリリース以降、これが含まれています。

また、選択したノードに表示されるイベントリスナーは、キャプチャ段階とバブリング段階で発生した順序で表示されます。

ヒットcommand+ option+ iマックOSX上とCtrl+ Shift+ iWindows上ではChromeでこれを発射します

Chrome Dev Toolsは最近、JavaScriptイベントを監視するためのいくつかの新しいツールを発表しました。

TL; DR

を使用して、特定のタイプのイベントをリッスンしますmonitorEvents()。

unmonitorEvents()リスニングを停止するために使用します。

を使用してDOM要素のリスナーを取得しgetEventListeners()ます。

[イベントリスナーインスペクター]パネルを使用して、イベントリスナーに関する情報を取得します。

カスタムイベントの検索

私の必要性として、サードパーティのコードでカスタムJSイベントを発見するために、以下の2つのバージョンgetEventListeners()が驚くほど役に立ちました。

• getEventListeners(window)
• getEventListeners(document)

イベントリスナーがアタッチされているDOMノードがわかっている場合は、windowまたはの代わりにそれを渡しますdocument。

既知のイベント

監視したいイベントがわかっている場合clickは、たとえばドキュメントの本文で以下を使用できますmonitorEvents(document.body, 'click');。

これdocument.bodyで、コンソールに記録されているすべてのクリックイベントが表示されるようになります。

DOMを確認すると、直接アタッチされたイベント（element.onclick =ハンドラー）を表示できます。FireQueryでFireBugを使用すると、FirefoxでjQueryに接続されたイベントを表示できます。FireBugを使用してaddEventListenerが追加したイベントを確認する方法はないようです。ただし、Chromeデバッガを使用してChromeで表示できます。

Allan JardineによるVisual Eventを使用して、ページ上のいくつかの主要なJavaScriptライブラリから現在アタッチされているすべてのイベントハンドラーを検査できます。jQuery、YUI、その他いくつかと連携します。

Visual EventはJavaScriptブックマークレットなので、すべての主要なブラウザーと互換性があります。

JavaScript環境を拡張して、イベントリスナーを追跡できます。ネイティブのaddEventListener（）メソッドを、それ以降に追加されたイベントリスナーのレコードを保持できるコードでラップ（または「オーバーロード」）します。また、DOMで発生していることを正確に反映するレコードを保持するために、HTMLElement.prototype.removeEventListenerを拡張する必要があります。

説明のために（テストされていないコード）-これは、addEventListenerを「ラップ」して、オブジェクト自体に登録されたイベントリスナーのレコードを作成する方法の例です。

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}