ライブラリからのページにはカスタマイズ可能なフォーム要素があります。どのイベント ハンドラーを使用するかを調べたいので、その要素と対話したときにどの JavaScript イベントが発生するかを確認したいと思います。
Chrome Web Developer を使用してこれを実行するにはどうすればよいですか?
ベストアンサー1
使用できますモニターイベント関数。
要素を検査し (表示されている要素のright mouse click→またはChrome デベロッパー ツールのタブに移動して目的の要素を選択) 、タブに移動して次のように記述します。InspectElementsConsole
monitorEvents($0)
これで、この要素の上にマウスを移動したり、フォーカスしたり、クリックしたりすると、発生したイベントの名前とそのデータが表示されます。
このデータの取得を停止するには、コンソールに次のように入力します。
unmonitorEvents($0)
$0は、Chrome デベロッパー ツールによって選択された最後の DOM 要素です。他の任意の DOM オブジェクト (たとえば、getElementByIdまたはの結果querySelector) をそこに渡すことができます。
監視対象のイベントを事前定義されたセットに絞り込むために、2 番目のパラメータとしてイベントの「タイプ」を指定することもできます。例:
monitorEvents(document.body, 'mouse')
2023-01-30 時点で利用可能なタイプのリストは次のとおりです。
- マウス
「マウスダウン」、「マウスアップ」、「クリック」、「ダブルクリック」、「マウスムーブ」、「マウスオーバー」、「マウスアウト」、「マウスホイール」 - キー
「keydown」、「keyup」、「keypress」、「textInput」
「touchstart」、「touchmove」、「touchend」、「touchcancel」をタッチします
「サイズ変更」、「スクロール」、「ズーム」、「フォーカス」、「ぼかし」、「選択」、「変更」、「送信」、「リセット」を制御します
出典ここ。
この機能がどのように動作するかを説明する小さな GIF を作成しました:
