Chrome DevTools を使用して、Web ページ要素で発生する特定のイベントを監視するにはどうすればよいですか?

Chrome DevTools でのイベントの監視

Chrome Web Developer を使用して強力な MonitorEvents 関数を利用すると、任意の要素で発生したイベントを監視できます。方法は次のとおりです:

1. ターゲット要素を検査します: 目的の要素を右クリックして [検査] を選択するか、[要素] タブに移動して選択します。
2. コンソールにアクセスします: Chrome デベロッパー ツール内の [コンソール] タブに移動します。

3. monitorEvents を呼び出します: コンソールに次のコマンドを入力します。 :

   monitorEvents(<pre class="brush:php;toolbar:false">unmonitorEvents(<pre class="brush:php;toolbar:false">monitorEvents(document.body, 'mouse')

   ))

   ここで、$0 は選択された DOM 要素を表します。

4. イベント データの観察: 要素と対話します (例: マウスオーバー、フォーカス、クリック)

イベント監視を停止するには、次のコマンドを入力するだけです:

あるいは、イベント タイプを次のように指定することもできます。監視対象イベントをフィルタリングするための 2 番目のパラメータ。例:

は、監視をマウス関連のイベントに制限します。使用可能なイベント タイプのリストは次のとおりです:

• mouse: Mousedown、mouseup、click、dblclick、mousemove、mouseover、mouseout、mousewheel
• key : keydown、keyup、keypress、textInput
• touch: touchstart、touchmove、touchend、touchcancel
• control: サイズ変更、スクロール、ズーム、フォーカス、ぼかし、選択、変更、送信、リセット

以下の図解 GIF は、monitorEvents 関数の使用法を示しています。

[monitorEvents 関数の使用法を示す GIF の画像]

以上がChrome DevTools を使用して、Web ページ要素で発生する特定のイベントを監視するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。