【Chrome控制台】获取元素上绑定的事件信息以及…
2018-06-24 00:48:32来源:未知 阅读 ()
需求场景
在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况。
解决方案
普通操作
之前面对这种情况,一般采取的措施就是在各个事件里写console.info,然后进行点击等操作触发事件,或者在控制台trigger元素上的事件,或者dispatchEvent。
这种方法比较繁琐,而且假如触发这个事件之前需要做大量操作,触发时间后需要重新来过,真的是浪费时间啊。
神级操作
今天偶然发现借助Chrome控制台的命令行,可以简单快捷地解决这个问题。
获取事件信息命令: getEventListeners
看到本页面那个精灵球了吗,接下来我们获取那个精灵球上的事件信息。
Chrome控制台输入命令:
getEventListeners(document.querySelector(".diggit"))
得到结果:
chrome控制台会输出一个事件信息数组,图中可以看出精灵球上有一个点击事件,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")
此时点击精灵球(你也点一下呗)
现在我们可以更准确地获取到我们想要监控的事件信息了:
所以说还是很有用的是吧,那么学到了的同时赶紧点击一下精灵球验证一下如何呢。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:图片加载完成再执行事件
下一篇:koa-route模块
- javascript如何获取图片颜色 2020-03-08
- 分享JavaScript获取网页关闭与取消关闭的事件 2020-02-29
- 高效的获取当前元素是父元素的第几个子元素 2020-02-15
- JS怎么获取父节点 2020-02-14
- JS获取当前地理位置的方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash