在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. Cisco网络模拟器踩坑记录

    1.在我们新建一个拓扑图的时候,选择设备之间的连线种类有时会导致线路不通的情况(两个端口上为红色点)这时候建议拆除这条线后选择闪电标记 的万能线帮助我们自动创建连线(这时就能根据它显示的线条种类得知应 ...

  2. python基础---python环境搭建windows版

    Python3.7.1标准安装 1.官网下载 官网地址:https://www.python.org/downloads/ 下载3.7.1 下载64/32bitwindows安装文件,下图x86-64 ...

  3. requests+unittest+ddt+xlrd+pymysql+BeautifulReport数据驱动

    # ddcapitestpython XXX接口自动化测试 # 一.数据驱动的思路 1.采用requests+unittest+ddt+xlrd+pymysql+BeautifulReport 2.r ...

  4. C#将文件转成16进制码流写入数据库存起来，访问的时候再还原成PDF文件。

    转自https://blog.csdn.net/liubowei_0312/article/details/53378146 适合将文件写入数据库,远程访问的时候还原1.首先把文件转成十六进制文件流 ...

  5. 【转】libgo

    原文:https://blog.csdn.net/libaineu2004/article/details/80554870 ------------------------------------- ...

  6. Ubuntu 18.04 手动编译安装 ffmpeg

    ffmpeg 是一个由提供对视频.音频和其他多媒体流文件进行处理功能的库和程序构成的自由软件项目,其常被用于适用于不同格式的音频和视频的录影.转换和流处理等场合.这里记录在 Ubuntu 18.04 ...

  7. AOP_原理

    什么是AOPAOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入封 ...

  8. JPA注解开发

    JPA注解开发 jpa是sun公司的一个ORM规范,只有接口和注解,没有具体实现. jpa是EJB3中的. 单表常用注解 书写注解,并配置 @Entity @Table(name = "c_ ...

  9. PAT1057 stack(分块思想)

    1057 Stack (30分)   Stack is one of the most fundamental data structures, which is based on the princ ...

  10. MySQL 分库分表 dble简单使用

    一.运行环境 Host Name IP DB Mod data0 172.16.100.170 mysql   data1 172.16.100.171 mysql   data2 172.16.10 ...