要素のインタラクションによってトリガーされるイベントを理解する

カスタマイズ可能なフォーム要素でイベントを適切に識別して処理するには、インタラクション時に発生する特定のイベントを理解することが不可欠です。 Chrome DevTools は、このプロセスを支援する強力なツール、monitorEvents を提供します。

monitorEvents() の使用

1. ターゲット要素を検査します: 要素を右クリックします「検査」を選択するか、「要素」タブで見つけます。 DevTools.
2. コンソール タブを開きます: 「コンソール」タブに切り替えます。
3. monitorEvents を呼び出します: コンソールに「monitorEvents($0)」と入力します。ここで、$0 は選択された要素を表します。

要素を操作するとき (例:ホバーしてクリックする) と、コンソールには、発生したイベント名とそれに対応するデータが表示されます。

イベント監視の停止

イベント監視を停止するには、コンソールで次のコマンドを入力します。

unmonitorEvents($0)

監視対象イベントのフィルタリング (オプション)

monitorEvents 関数を使用すると、次のことが可能になります。 2 番目のパラメータとしてタイプを指定することで、監視対象のイベントを絞り込むことができます。たとえば、monitorEvents(document.body, 'mouse') はマウス関連のイベントのみをログに記録します。

2023 年 1 月 30 日時点で利用可能なイベント タイプinclude:

• マウス
• キー
• タッチ
• コントロール

monitorEvents 機能により、開発者は簡単に監視できますカスタマイズされたフォーム要素のイベント処理のトラブルシューティングを行い、Web 上で効果的なインタラクションとユーザー エクスペリエンスを促進します。