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

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

使用 Chrome 网页执行以下步骤开发人员：

1. 检查元素：

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

2. Monitor事件:

   • 使用monitorEvents:

     • 打开“控制台”选项卡。
     • 输入monitorEvents ($0) 在控制台中，其中$0代表选定的element.

   • 指定事件类型:

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

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

3. 停止监视:

   • 要停止事件监视，请输入控制台中的 unmonitorEvents($0)。

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

您可以缩小范围通过指定以下内容来关闭监视的事件类型：

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