专注于
IT技术和业内交流

Chrome DevTools — 事件监听

Chrome DevTools 命令行 API 提供了各种方式来观察和检查事件侦听器。JavaScript 在交互式网页,有中心的作用和浏览器为您提供了一些有用的工具来调试事件和事件处理程序。

监视事件

MonitorEvents()
方法指示 DevTools 要记录上指定的目标信息。

第一个参数是要监视的对象。
所有事件都返回如果第二个参数不提供。
以指定的事件来听听,
作为第二个参数传递的字符串数组。

监听页面的主体上的点击事件︰

monitorEvents (document.body,"click");

如果监视的事件是支持 * 事件类型 *
DevTools 映射到一组标准事件名称
然后对该类型的方法侦听事件。

命令行 API 有完整的映射的 * 事件类型 * 他们报道的事件。

要停止监视事件,
调用 unmonitorEvents() 方法,并给它要停止监视的对象。

停止监听 ‘body’ 对象上的事件︰

unmonitorEvents(document.body)

查看在对象上注册事件侦听器

API getEventListeners()
返回在指定的对象上注册事件侦听器。

返回值是一个对象,包含数组的每个已注册的事件类型 (click 或者 keydown)例如,
每个数组的成员是描述对象
对于每种类型注册的监听器。
例如,
下面的代码列出在文档对象上注册的所有事件侦听器︰

getEventListeners(document)

Output of using getEventListeners()

如果超过指定的对象,注册一个监听器
然后该数组包含一个成员为每个侦听器。
在以下示例中,
有两个事件侦听器注册上 ‘mousedown’ 事件的 #scrollingList 元素︰

View of the event listeners attached to mousedown

进一步扩大每个对象,探索它们的性质︰

Expanded view of listener object

查看对 DOM 元素注册事件侦听器

默认情况下,
Event Listeners 面板在元素检查器中的将显示附加到页面的所有事件︰

Event listeners panel

筛选器限制的只是对所选节点的事件︰

Event listeners panel, filtered by selected node only

通过扩大对象,该面板显示该事件侦听器的详细信息。
在此示例中,
页面有两个事件侦听器通过 jQuery 连接︰

Expanded view of the event listeners

本文由张翔翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 事件监听

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们