我在库的页面上有一个可自定义的表单元素。我想看看当我与它交互时会触发哪些 javascript 事件，因为我试图找出要使用的事件处理程序。
如何使用 Chrome Web Developer 来做到这一点？
您可以使用监控事件 http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents功能。
只需检查您的元素（right mouse click → Inspect在可见元素上或转到ElementsChrome 开发者工具中的选项卡并选择所需的元素），然后转到Console选项卡并写入：
monitorEvents($0)
现在，当您将鼠标移到该元素上、聚焦或单击它时，将显示触发事件的名称及其数据。
要停止获取此数据，只需将以下内容写入控制台：
unmonitorEvents($0)
$0 https://developer.chrome.com/devtools/docs/commandline-api#0-4只是 Chrome 开发者工具选择的最后一个 DOM 元素。你可以在那里传递任何其他 DOM 对象（例如getElementById or querySelector).
您还可以指定事件“类型”作为第二个参数，以将监视的事件范围缩小到某个预定义的集合。例如：
monitorEvents(document.body, 'mouse')
截至 2023 年 1 月 30 日，可用类型列表如下：
- mouse
“mousedown”、“mouseup”、“单击”、“dblclick”、“mousemove”、“mouseover”、“mouseout”、“mousewheel”
- key
“按键”、“按键”、“按键”、“文本输入”
- touch
“触摸开始”、“触摸移动”、“触摸结束”、“触摸取消”
- control
“调整大小”、“滚动”、“缩放”、“聚焦”、“模糊”、“选择”、“更改”、
“递交重设”
取自here https://developer.chrome.com/docs/devtools/console/utilities/#monitorEvents-function.
我制作了一个小 gif 来说明此功能的工作原理：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
