如何使用 Chrome DevTools 監控網頁元素上觸發的特定事件？

在Chrome DevTools 中監控事件

您可以透過利用強大的MonitorEvents 函數，使用Chrome Web Developer 來監控在任何元素上觸發函數的事件。操作方法如下：

1. 檢查目標元素： 右鍵單擊所需元素並選擇“檢查”或轉到“元素”選項卡並選擇它。
2. 存取控制台：導覽至 Chrome 開發者工具中的「控制台」標籤。

3. 呼叫監視器事件：在控制台中鍵入以下命令:

   monitorEvents(<pre class="brush:php;toolbar:false">unmonitorEvents(<pre class="brush:php;toolbar:false">monitorEvents(document.body, 'mouse')

   ))

   其中 $0 代表選定的 DOM 元素。

4. 觀察事件資料： 與元素互動（例如，滑鼠懸停、聚焦、點擊）並見證顯示的事件名稱及其關聯資料。

要停止事件監控，只需輸入以下命令：

或者，您可以將事件類型指定為第二個參數用於過濾監控事件。例如：

將限制監視與老鼠相關的事件。可用事件類型清單包括：

• 滑鼠： mousedown、mouseup、click、dblclick、mousemove、mouseover、mouseout、mousewheel
keydown、keyup、keypress、textInput
• 觸摸：
touchstart、touchmove、touchend、touchcancel
• control：
縮放調整、聚焦、模糊、選擇、更改、提交、重置
• 下面的GIF 演示了monitorEvents 函數的用法：

[GIF 圖像顯示了monitorEvents 函數的用法]

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