了解元素互動觸發的事件

要在可自訂表單元素上正確識別和處理事件，必須了解互動時觸發的特定事件。 Chrome DevTools 提供了一個強大的工具，monitorEvents，來協助完成此過程。

使用monitorEvents()

1. 檢查目標元素： 右鍵單擊該元素並選擇“Inspect”或在DevTools 的“Elements”選項卡中找到它。
2. 開啟控制台Tab: 切換到「控制台」標籤。
3. 呼叫monitorEvents: 在控制台中輸入monitorEvents($0)，其中$0代表所選元素。

當您與元素互動時（例如，懸停、單擊），控制台將顯示觸發的事件名稱及其對應的事件名稱data.

停止事件監控

若要停止事件監控，請在控制台中輸入下列指令：

unmonitorEvents($0)

過濾監控的事件(可選）

monitorEvents 函數可讓您透過指定類型作為第二個參數來縮小監視事件的範圍。例如，monitorEvents(document.body, 'mouse') 只會記錄與滑鼠相關的事件。

截至 2023 年 1 月 30日可用的活動類型包括：

• 滑鼠
• 按鍵
• 觸摸
• 滑鼠

控制