如何在 Chrome DevTools 中監控 DOM 事件？

使用Chrome DevTools 監控DOM 事件：綜合指南

了解網頁上可自訂表單元素的行為對於有效監控DOM 事件關重要事件處理。 Chrome 開發者工具提供了監控元素上觸發的事件的功能，從而深入了解事件的發生情況。

使用 monitorEvents 函數

監控特定元素上觸發的事件:

1. 使用 Chrome DevTools 檢查所需的元素。
2. 開啟控制台標籤。
3. 在控制台中鍵入monitorEvents($0)，其中$0 代表所選元素.

當您與元素互動時（例如，移動滑鼠、按一下），觸發的事件的名稱和數據將顯示在控制台中。

取消監視事件

要停止監控事件，請在控制台中輸入 unmonitorEvents($0)。

指定事件類型

您可以縮小監控範圍透過指定類型作為第二個參數來指定事件：

monitorEvents(document.body, 'mouse');

這只會監視與滑鼠相關的事件，例如「mousedown」、「mouseup」和「mousemove」。

可用的事件類型（截至2023 年1 月30 日）

• 滑鼠： "mousedown"、"mouseup"、 "click"、"dblclick"、"mousemove ", "滑鼠懸停", "滑鼠移出", "滑鼠滾輪"
• key: "keydown", "keyup", " keypress", "textInput"
• 觸摸：“觸摸開始”，“觸摸移動”，“觸摸結束”，“觸摸取消”
• 控制： “調整大小”，“滾動”，“縮放”，“聚焦” 、“模糊”、“選擇”、“更改”、“提交”、“重置”

使用範例

以下動畫GIF 說明了使用monitorEvents函數：

[示範元素上事件監控的GIF圖片]

以上是如何在 Chrome DevTools 中監控 DOM 事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！