在web开发过程中难免会遇到让程序员去修改一些js代码东西，例如js的ajax和php等语言的交互等，在这其中你不得不了解点js的事件触发，且随着js的盛行各种插件的事件让程序员眼花缭乱，所以借助一个好的工具可以帮助我事半功倍，并且想作为一名合格的全栈型工程师一直是我的前进的目标！

工具/原料

  • 火狐+google浏览器
  • google的Visual Event插件

1.首先对于一些简单的html页面，里面的js文件加载的也少的情况下，我们可以可以使用火狐的firebug或者google的控制台都可以轻松的查看。火狐浏览器的查看方法安装Firebug然后按F12选中你要看的dom元素在右侧的事件中可以详细的看到绑定了那些事件.

2.Google浏览器也可以用同样的方法查看对应dom元素绑定的事件。F12-->Elements-->Event Listenners

3.但是对于一些复杂的Html页面,相当于加载的js文件和相应的插件也比较多,这个时候用浏览器自带的事件查看器就显得力不从心了!

4.所以遇到上面这种情况,我们想快速定位一个元素绑定那些事件的时候,就得借助google的Visual Event插件帮助我们快速定位了,所以我们首先我们的去google 扩展库去下载对应的插件并安装.

5.安装成功后浏览器的右上角会出现一个小眼睛.

6.接着说说一下如何使用Visual Event插件的小眼睛，等页面加载完之后，点击小眼睛然后大概过不了5秒钟，就可以看到页面上元素绑定事件了.

7.最后移动鼠标到你想查看的元素上面就可以看到对于的js文件已经和对应的事件名真的很方便使用.

浏览器中开发人员工具快速找到dom元素绑定那些JS事件的更多相关文章

  1. Visual Event ：快速查看 DOM 上绑定的 JS 事件

    http://web.jobbole.com/82503/ Javascript中的事件经常被认为如谜一般不可解.Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它 ...

  2. 一个DOM元素绑定多个事件时，先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  3. EXT.NET高效开发（三）——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...

  4. 不仅仅是浏览器 走近Chrome开发人员工具

    Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...

  5. Chrome - 怎样独立窗口打开开发人员工具

    打开开发人员工具, 右上角找到下图红圈的键, 长按左键直到出现绿圈的键, 别松开鼠标, 把指针移到绿圈的键上面, 松开左键, 好了, 一个独立窗口粗线了. 转载请声明出处: http://www.cn ...

  6. 常用JS调试工具使用方法，帮你快速定位问题（Firebug+ IE“开发人员工具”）

    来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可 ...

  7. Chrome_浏览器开发人员工具

    Google Chrome 浏览器开发人员工具,让网页开发变得更轻松 无论是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自带的 Dev ...

  8. F12 开发人员工具中的控制台错误消息

    使用此参考解释显示在 Internet Explorer 11 的控制台 和调试程序中的错误消息. 简介 使用 F12 开发人员工具进行调试时,错误消息(例如 EC7111 或 HTML1114)将显 ...

  9. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

随机推荐

  1. JSON是什么

    JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度, 那么,JSON到底是什么? JSON就是一串字符串 只不过元素会使 ...

  2. 小程序页面收录 sitemap

    微信现已开放小程序内搜索,你的小程序页面将可能展示在微信搜索等多个公开场景中.当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引. 若小程序中存在不适合展示信息如用户个人信息.商 ...

  3. LGOJP3959 宝藏

    题目链接 题目链接 题解 一开始想了一个错误的状压dp,水了40分. 这里先记录一下错误的做法: 错解: 设\(g[i,j,S]\)从\(i\)到\(j\),只经过集合\(S\)中的点的最短路,这个可 ...

  4. Fiddler抓包工具使用指南|手机安装Fiddler的安全证书

    Fiddler 4 1.设置: Tools ->  Telerik Fiddler Options 勾选远程 手机安装证书 ->使用Android手机的浏览器打开:http://10.2. ...

  5. Dubbo源码分析：Exchanger

    实现此接口获取Server服务. 实现的类只有HeaderExchanger类. 方法 时序图

  6. volatile 关键词

    volatile 关键字指示一个字段可以由多个同时执行的线程修改. 出于性能原因,编译器,运行时系统甚至硬件都可能重新排列对存储器位置的读取和写入. 声明了 volatile 的字段不进行这些优化.这 ...

  7. WinDbg常用命令系列---.write_cmd_hist (写命令历史记录)

    .write_cmd_hist 简介 .write_cmd_hist命令将调试器命令窗口的整个历史记录写入文件. 使用形式 .write_cmd_hist Filename 参数 Filename指定 ...

  8. 1-移远GSM/GPRS M26 模块 Mini板 开发板(使用说明)

    板子预览 引脚说明 供电 关于串口电压匹配引脚: 上面一版朋友测试反应的问题 (上面的内容不删除,因为已经出售了1套) 1,源码开发完以后,烧录完成 PWRKEY按键不能使用了,需要断电上电,那么就需 ...

  9. Codevs 1305 Freda的道路(矩阵乘法 DP优化)

    1305 Freda的道路 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description Freda要到Rainbow的城堡去玩了.我们可以认 ...

  10. SQL基础-操纵表及插入、查询

    一.操纵表 1.表的关键信息 2.更新表名 更新表名:使用RENAME TABLE关键字.语法如下: RENAME TABLE 旧表名 TO 新表名; 比如,生产环境投产前备份teacher表,使用如 ...