日常的网页开发调试工作中，经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置，下面介绍三种用来跟踪页面中的事件的方法。

1、使用firefox调试

我们可以使用firefox的debug工具，找到指定元素，然后查看事件面板

2、使用chrome调试

在要检查的元素上单击右键选择查看元素，然后，右边的面板中会显示style标签，切换到EventListenrs标签，可以看到相关的事件绑定信息。点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置。不过这种方法并非总是可用，下面会提到。

3、使用 Chrome Web Store 中 Visual Event 检查事件绑定信息

上面的两种方法，当我们定位定义事件的代码位置时，如果我们使用了JS库（比如jquery）的话调试工作又会变得复杂，程序往往会把我们引导到jquery库中，这样的话仍然是不方便找到在哪个文件的那个行中addEventListener了事件。这个时候就需要 Visual Event 闪亮登场了……

安装完 Visual Event 后，工具条上会有 Visual Event 的图标。然后打开我们要调试的页面，在工具栏上点击他那个火眼金睛一样的眼睛图标，网页上所有绑定了事件的 HTML 元素都会由一个半透明的蓝色遮罩层覆盖，鼠标移动到相应的元素上即可看到事件绑定信息。

刚才说了，在使用了Js 库的时候，visual event 依然很好用，下面列出它支持的几个库的名字及版本信息：

  • DOM 0 events
  • jQuery 1.2.x +
  • YUI 2.6.x (2.x might work!)
  • MooTools 1.2.x
  • Prototype 1.6.x
  • JAK (Events 2.2)
  • Glow

获取 Visual Event

VisualEvent 在GitHub上的位置 ：https://github.com/DataTables/VisualEvent

VisualEvent 在Chrome webstore 上的位置：https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim

本文参考资料

http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

http://www.sprymedia.co.uk/article/Visual+Event

JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置的更多相关文章

  1. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  2. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

  3. JS基础：求一组数中的最大最小值，以及所在位置

    var arr = [0, 5, -3, 6, 2, -6, 10]; //定义一个最大值和一个最小值,把他们的索引值赋值给固定的两个变量 var maxValue = arr[0]; var min ...

  4. 实现一个字符串匹配算法，从字符串 H 中，查找 是否存在字符串 Y ，若是存在返回所在位置的索引，不存在返回 -1（不基于indexOf/includes方法）

    /** 1.循环原始字符串的每一项,让每一项从当前位置向后截取 H.length 个字符, 然后和 Y 进行比较,如果不一样,继续循环:如果一样返回当前索引即可 **/ function myInde ...

  5. JS事件调试

    JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置   日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. ...

  6. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

  7. jQuery实现回车绑定Tab事件

    有时候我们希望回车事件绑定的是键盘的Tab事件.我的第一思路就是切换事件的keyCode,比如键盘事件按下的keyCode如果是13,我们将keyCode改为9.但是在实际编程中却未能实现此效果.于是 ...

  8. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

  9. 如何使用chrome浏览器进行js调试找出元素绑定的点击事件

    大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或 ...

随机推荐

  1. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  3. 2.WindowsServer2012R2装完的一些友好化设置

    网站部署之~Windows Server | 本地部署 http://www.cnblogs.com/dunitian/p/4822808.html#iis 1.桌面图标(控制面板里面屏蔽了,得自己输 ...

  4. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  5. netty5 HTTP协议栈浅析与实践

      一.说在前面的话 前段时间,工作上需要做一个针对视频质量的统计分析系统,各端(PC端.移动端和 WEB端)将视频质量数据放在一个 HTTP 请求中上报到服务器,服务器对数据进行解析.分拣后从不同的 ...

  6. Swift enum（枚举）使用范例

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  7. 如何使用swing创建一个BeatBox

    首先,我们需要回顾一些内容(2017-01-04 14:32:14): 1.Swing组件 Swing的组件(component,或者称之为元件),是较widget更为正确的术语,它们就是会放在GUI ...

  8. javascript arguments(转)

    什么是arguments arguments 是是JavaScript里的一个内置对象,它很古怪,也经常被人所忽视,但实际上是很重要的.所有主要的js函数库都利用了arguments对象.所以agru ...

  9. ES6之变量常量字符串数值

    ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...

  10. LeetCode All in One 题目讲解汇总(持续更新中...)

    终于将LeetCode的免费题刷完了,真是漫长的第一遍啊,估计很多题都忘的差不多了,这次开个题目汇总贴,并附上每道题目的解题连接,方便之后查阅吧~ 477 Total Hamming Distance ...