伞下一肩雨
Chrome调试----控制台获取元素上绑定的事件信息以及监控事件 需求场景
在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况。
解决⽅案
普通操作
之前⾯对这种情况,⼀般采取的措施就是在各个事件⾥写console.info,然后进⾏点击等操作触发事件,或者在控制台trigger元素上的事件,或者dispatchEvent。
这种⽅法⽐较繁琐,⽽且假如触发这个事件之前需要做⼤量操作,触发时间后需要重新来过,真的是浪费时间啊。
神级操作
今天偶然发现借助Chrome控制台的命令⾏,可以简单快捷地解决这个问题。
获取事件信息命令: getEventListeners
看到本页⾯那个精灵球了吗,接下来我们获取那个精灵球上的事件信息。
Chrome控制台输⼊命令:小企业会计准则
getEventListeners(document.querySelector(".diggit"))
得到结果:
核农学报
upieachrome控制台会输出⼀个事件信息数组,图中可以看出精灵球上有⼀个点击事件,useCapture为false表⽰这个事件是冒泡⽽不是捕获,once为false表⽰这个事件不会只监听⼀次,passive为 false表⽰这个事件是很普通的事件,浏览器的默认操作不会在另⼀个线程中进⾏。
最是寻常梦展开listener:
⾥⾯还会展⽰事件将依次在哪些元素上冒泡触发。
监控元素上的事件命令: monitorEvents 和 unmonitorEvents
看名字就⼤概知道⼀个是监控事件,⼀个是取消监控事件。
那么同样监控⼀下那个精灵球:
monitorEvents(document.querySelector(".diggit"))
当我运⾏此命令⾏后,将⿏标再移动到精灵球上时,控制台很快输出了⼤量事件。
⼀般情况下,这并不是我们想要的,我们更多地时候可能只想要⼀两种事件。
那么我们先解除监控:
unmonitorEvents(document.querySelector(".diggit"))
然后可以只监控⿏标事件:
monitorEvents(document.querySelector(".diggit"),"mouse")
当然我们更常⽤的是只监控⿏标点击事件:
北京网通公司monitorEvents(document.querySelector(".diggit"),"click")
此时点击精灵球(你也点⼀下呗)
现在我们可以更准确地获取到我们想要监控的事件信息了:
所以说还是很有⽤的是吧,那么学到了的同时赶紧点击⼀下精灵球验证⼀下如何呢。
出处:
==================================================================================================我们在看⼀个简单的,在Elements中点击元素对象,中右边窗⼝点击Event Listeners界⾯,可以看到事件,如下图: