chrome下教你如何查看元素绑定的事件

说在开头

  在前端调试的时候，我们经常遇到这一个问题，要想审查特定元素上绑定的事件;

通常来讲，在chrome开发者工具有一栏Event listeners可以查看特定元素上绑定的事件

如下图所示：

   这里我做了一个测试，不管是使用Dom0级规范中on+event,还是DOM2中addlisteners均能显示所绑定事件类型，并且点击对应js文件后，能正确指向对应的事件处理函数。

  更加强大的是，如果我们给其父元素绑定事件，由于事件冒泡的关系，查看子元素的Event listeners中也能看到该事件；

  当然查看父元素的Event listeners中也能看到该事件，很有意思吧。(相反，如果子元素绑定事件，父元素上时看不到的。)如下图：

   这个方式，对于使用原生的方式给元素绑定事件时没有问题的；但是，现如今jauery等类库大行其道,我们很多时候都是通过$ob.on("click",handler);$ob.bind("moveenter",handler);等方式

给元素绑定事件处理程序，此时，我们再想查看这个元素上绑定的事件时，你会发现，

事件直接指向jquery源码中去了，正如下图所示；

   很苦恼吧，据说firebug有个插件叫fireJquery可以解决ff之下的这个问题；

   但是对于这种偏执于使用chrome进行开发和调试的人来讲没多大用处

   寻寻觅觅了好久，偶然间发现了Visual+Event这个东东可以很容易的查看元素上绑定的事件。

---

重点，重点

看了一下有两种使用方式：

（1）书签形式：

   目前该工具有两个版本Visual+Event和Visual+Event2，经本人测试Visual+Event可能因为功能不完善的原因，能看到绑定的事件，但是没有代码指向

   版本1：http://www.sprymedia.co.uk/article/Visual+Event

   版本2：http://www.sprymedia.co.uk/article/Visual+Event+2

打开链接：http://www.sprymedia.co.uk/article/Visual+Event+2

然后找到这个地方（如下图）：

拖放到书签栏，之后点击这个书签，稍等片刻天可以看到页面上元素所绑定的事件

效果如下：

（2）安装改插件：

  安装方式，比较简单：

  chrome地址栏输入: chrome://extensions/；然后鼠标拖动“插件”到该区域；安装成功改插件的如下图所示，然后重启浏览器

   如果工具栏出现眼睛的图标表示安装成功（如下图）

  点击眼睛就可以看到页面元素所绑定的事件。

  鼠标移上去，就可以显示事件的处理函数；如果想进行详情的分析或者调试，请注意代码上面的提示：如下图所示

  更加神器的是，点击右上的trigger Event还能触发对应的事件，如上图所示。

该插件完美支持：

• DOM 0 events

• jQuery 1.2+

• YUI 2

• MooTools 1.2+

• Prototype 1.6+

• Glow

• ExtJS 4.0.x

---

说在最后

附件为插件安装包；请点击下载。最后呢，我一直觉得审查元素事件还是让前端开发人员很苦恼的；希望本篇博客能帮助广大的前端开发工程师。

转载于:https://blog.51cto.com/shuizhongyue/1712928