我在库的页面上有一个可定制的表单元素。我想查看与之交互时触发了哪些 javascript 事件,因为我试图找出要使用的事件处理程序。
如何使用 Chrome Web Developer 做到这一点?
同样,您可以右键单击目标元素 -> 选择 “检查元素”。在 dev 框架的右侧向下滚动,底部是 “事件侦听器”。展开树以查看将哪些事件附加到元素。不知道这是否适用于通过冒泡处理的事件(我猜不是)
您可以使用monitorEvents函数。
只需检查您的元素( right mouse click
→ Inspect
可见元素,或转到Elements
标签,然后选择所需的元素),然后转到 “ Console
标签并输入以下内容:
monitorEvents($0)
现在,当您将鼠标移到该元素上,进行焦点或单击时,将显示触发事件的名称及其数据。
要停止获取此数据,只需将其写入控制台:
unmonitorEvents($0)
$0
只是 Chrome 开发者工具选择的最后一个 DOM 元素。您可以在那里传递任何其他 DOM 对象(例如getElementById
或querySelector
结果)。
您还可以将事件 “类型” 指定为第二个参数,以将监视的事件缩小到某个预定义的集合。例如:
monitorEvents(document.body, 'mouse')
这些可用类型的列表在这里。
我做了一个小 gif,说明了此功能的工作原理: