如何使用 Chrome DevTools 查看元素上觸發的事件？

使用Chrome DevTools 查看元素上觸發的事件

要對網頁上的事件處理進行故障排除和優化，您可以使用Chrome DevTools 進行檢查在特定元素上觸發的事件。

使用Chrome Web Developer 執行以下步驟：

1. 檢查元素：

   • 檢查元素
   ：
2. 鍵選擇「檢查」或導覽至DevTools 中的「元素」標籤。
   • 監控事件

     ：

     • 使用monitors
     使用monitors
   >
   • 開啟「控制台」標籤。

     在「控制台」中輸入monitorEvents($0)控制台，其中 $0 代表所選元素。

     指定事件類型
   :

（可選）提供您的事件類型想要作為MonitorEvents 的第二個MonitorEvents 的第二個個參數進行監視，例如，monitorEvents(document.body, 'mouse').

3. 與被檢查元素的交互將現在顯示事件名稱和關聯數據。

   停止監視
:

要停止事件監視，請在中輸入unmonitors($0)

• 可用的事件類型（截至2023 年1 月30 日）
• 您可以透過指定來縮小監控事件的範圍以下類型：
• 滑鼠：滑鼠事件（向下、向上、點擊等）
• 鍵：鍵盤事件（向下、向上、按下等）

touch：觸控事件（開始、移動、結束等）control：元素控制事件（調整大小、聚焦、變更等）

以上是如何使用 Chrome DevTools 查看元素上觸發的事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！