如何使用 Chrome DevTools 查看元素上触发的事件？

使用 Chrome DevTools 查看元素上触发的事件

要对网页上的事件处理进行故障排除和优化，您可以使用 Chrome DevTools 进行检查在特定元素上触发的事件。

使用 Chrome Web Developer 执行以下步骤：

1. 检查元素：

   • 右键单击目标元素并选择“检查”或导航到 DevTools 中的“元素”选项卡。

2. 监控事件：

   • 使用monitorEvents:

     • 打开“控制台”选项卡。
     • 在“控制台”中输入monitorEvents($0)控制台，其中 $0 代表所选元素。

   • 指定事件类型:

     • （可选）提供您的事件类型想要作为 MonitorEvents 的第二个参数进行监视，例如，monitorEvents(document.body, 'mouse').

与被检查元素的交互将现在显示事件名称和关联数据。

3. 停止监视:

   • 要停止事件监视，请在中输入 unmonitorEvents($0)

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

您可以通过指定来缩小监控事件的范围以下类型：

• 鼠标：鼠标事件（向下、向上、单击等）
• 键：键盘事件（向下、向上、按下等）
• touch：触摸事件（开始、移动、结束等）
• control：元素控制事件（调整大小、聚焦、更改等）

以上是如何使用 Chrome DevTools 查看元素上触发的事件？的详细内容。更多信息请关注PHP中文网其他相关文章！