了解元素交互触发的事件

要在可自定义表单元素上正确识别和处理事件，必须了解交互时触发的特定事件。 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 日可用的事件类型包括：

• 鼠标
• 按键
• 触摸
• 控制

monitorEvents功能可以让开发者轻松观察并对自定义表单元素的事件处理进行故障排除，促进网络上的有效交互和用户体验。