1. ホーム
  2. javascript

[解決済み] Chrome DevToolsで要素に発生したイベントを表示するにはどうすればよいですか?

2022-03-14 21:17:53

質問

あるライブラリのページに、カスタマイズ可能なフォーム要素があります。どのイベントハンドラを使用すればよいかを調べるために、フォームを操作したときに発生する javascript のイベントを確認したいのですが、どのようにすればよいですか?

Chrome Web Developerを使用して、どのようにそれを行うのですか?

解決方法は?

  • ヒット F12 をクリックすると、Dev Toolsが開きます。
  • ソース]タブをクリックします。
  • 右側で、"イベントリスナーブレークポイント"までスクロールし、ツリーを展開します。
  • リッスンしたいイベントをクリックします。
  • ターゲット要素と対話し、それらが発火した場合、デバッガでブレークポイントを取得します。

同様に、ターゲット要素を右クリックし、> select "inspect element" dev frameの右側を下にスクロールすると、一番下に「event listeners」があります。 ツリーを展開すると、その要素にどのようなイベントが関連付けられているかがわかります。 バブリングで処理されるイベントについては、この方法が有効かどうかは不明です(無効だと思います)。