Anonim

イベントリスナーで何らかの競合が発生したことがありますか? または、ページ上の同じアクションで実行されている他のアクションを確認したいだけです。 ブラウザに応じて、これは組み込み機能である場合とそうでない場合があります。

ブラウザに組み込み

Google Chromeで、ページを右クリックして、[要素の検査]に移動します。 そこから、[要素]タブにいることを確認し、HTMLのブロックをクリックします。 右側のサイドバーにタブ付きのセクションがあり、イベントリスナをクリックして、ドキュメントがリッスンしているアクションを確認できます。 これらの各アクションをさらにドリルダウンして、最初の宣言がどこで発生しているかを確認できます。
Internet Explorerには、同様の機能が組み込まれていると思います。 FireFoxでは、ブラウザでその機能を表示するにはFireBugアドオンが必要だと思います。

getEventListeners

これは、FirefoxのChromeとFirebugに直接組み込まれているメソッドです。 構文:getEventListeners(オブジェクト)。 したがって、jQueryと組み合わせた場合の簡単な例は次のとおりです。

getEventListeners($( '#container'));

開発者コンソールに直接移動し、リスナーを表示する任意の要素に対してそのコマンドを入力するだけです。
getEventListeners Chrome
getEventListeners Firebug

jQuery

jQueryでこの情報を取得する完全にサポートされた方法はもうありません。 jqueryのプライベートメソッドには次の方法でアクセスできます。

$ ._ data($( '')、 'events');

適切な要素参照に置き換えます。 これは公的にサポートされておらず、ドキュメントもありません。また、jQueryの新しいリリースでは機能しなくなる可能性があるため、それに依存しないでください。 使用する場合は、デバッグのみに使用してください。

しおり

上記のいずれにも当てはまらない場合は、リスナーが配置されているページに表示できる非常にクールなブックマークレットがあります。 ここに移動すると、ブラウザのバーにドラッグするブックマークレットが提供されます。 これは正直、私が最も頻繁に使用する方法です。リスナーがページのどこにあるかを正確に確認できます。

すべてのイベントリスナーを表示する