如何在 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”， “點選」、「dblclick」、「滑鼠移動」、「滑鼠懸停」、「滑鼠移出」、「滑鼠滾輪」
• 鍵：「keydown」、「keyup」、 “keypress”、“ textInput"
• touch: "touchstart", "touchmove", “touchend”、“touchcancel”
• 控制： 「調整大小」、「滾動」、「縮放」、「聚焦」、「模糊」、「選擇」、「更改」、「提交」、「重置」

範例用法

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

[演示監視元素上的事件的GIF 圖像]

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