Chrome调试 ---- 控制台获取元素上绑定的事件信息以及监控事件

需求场景 

在前端开发中，偶尔须要验证下某个元素上到底绑定了哪些事件，以及监控某个元素上的事件触发状况。

解决方案

普通操做

以前面对这种状况，通常采起的措施就是在各个事件里写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")

此时点击精灵球（你也点一下呗）

如今咱们能够更准确地获取到咱们想要监控的事件信息了：

 因此说仍是颇有用的是吧，那么学到了的同时赶忙点击一下精灵球验证一下如何呢。

 

 

出处：https://www.cnblogs.com/vvjiang/p/7836696.html

==================================================================================================

咱们在看一个简单的，在Elements中点击元素对象，中右边窗口点击Event Listeners界面，能够看到事件，以下图：