Chrome插件Visual Event查看Dom元素绑定事件的利器

找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享.

用Chrome插件Visual Event查看Dom绑定的事件

Visual Event简介

Visual Event是一个开源 Javascript 书签,能提供绑定在DOM元素上的事件调试信息。Visual Event能显示如下信息:

1、哪一个元素有事件绑定

2、某元素上绑定的事件类型

3、事件触发后运行的代码段

4、定义绑定函数的源文件和行号(仅限于WebKit和Opera浏览器)

除了对调试你自己的代码大有用途,Visual Event还能被用作教学工具,显示发起了多少网站。

Visual Event是开源软件(GPLv2),并且在GitHub上有一个Git仓库目录,供你去提交或照你所想的去修改

安装

由于Visual Event是一个小书签,所以在任何网页上安装和运行它都很简单:

1、拖拽右侧的“Visual Event”链接到你的书签栏上:Visual Event

2、载入一个使用了浏览器所能支持的js库的网页

3、点击书签栏中的“Visual Event”

4、查看绑定在文档元素上的事件处理器

自动载入的Visual Event例子在这里有提供。这个例子使用Data Tables创建了一个不同元素上绑定了许多事件的测试页面。

它是如何工作的

W3C 没有提供标准的方法推荐能发现特定元素上绑定事件的DOM接口。尽管这似乎是个疏忽,也有一个建议方法能将3级DOM规范的 eventListenerList 属性包含进来,但很不幸的是,在后来的草案中这个方法被移除了。因此,我们不得不研究独立的通常能维护一个事件的高速缓存的Javascript库(所以它们能在后来被移除并执行其他有用的抽象化)。

因此,Visual Event为了能显示事件,它必须能够从 JS 库中解析出事件信息。目前Visual Event能支持的库有如下这些:

  • DOM 0 events
  • jQuery 1.2+
  • YUI 2
  • MooTools 1.2+
  • Prototype 1.6+
  • Glow
  • ExtJS 4.0.x

如何参与

Visual Event是个开源软件,在GPLv2证书下可以获得。通过Git实现开源控制,而且该项目在GitHub 上有一个网页。事实上任何对Visual Event的提高有帮助的建议都是十分受欢迎的!如果你遇到什么问题,请在 GitHub上将你遇到的问题作为讨论(issue)展开,包括出现问题的网页链接地址。Fork代码以及合并分支(pull request)也同样被鼓励!

你可能有一个很感兴趣的地方,就是如何能添加对额外Javascript库的支持。关键是能够获取到该库使用的事件缓存,因为没有事件缓存就不可能知道哪个节点有事件以及绑定代码。

VisualEvent类有一个静态数组叫做“VisualEvent.parsers”,它是一个函数的数组——想增加一个新的解析器,只需要将你的函数加到这个数组里。这个函数必须返回一个带有以下参数的javascript对象数组:

建立Visual Event

为了能运行本地的Visual Event副本,你必须先建立一个Visual Event,因为这个过程会有文件级联操作,即将库中的解析器移动到主文件中。建立的过程中还同时会建立 JSDoc文 档并压缩 JS 文件(除非是调试生成的)。

为了建立Visual Event,你在终端只需要一个能运行bash脚本并能输入“./build .sh debug”命令的系统。这会在建立Visual Event和正确的载入器的目录中的“builds”目录里创建一个新目录(注意时间戳是用于防止开发和部署过程中boolmarklet的缓存问题)。以下是建立过程的脚本的使用实例:

文件“bookmarklethtml”是为了使你能方便地建立你自己的书签载入器。通常你只需要修改书签的路径地址。链接会在每次按键时更新,你只需要像你安装其他书签插件一样去安装它。

转载:http://www.360docs.net/doc/info-bda8c890f78a6529647d53ea.html

时间: 2024-08-11 01:13:53

Chrome插件Visual Event查看Dom元素绑定事件的利器的相关文章

Js为Dom元素绑定事件须知

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { alert('I was clicked!'); }); 上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败. 正确的做法是,等待元素加载完后再执行 $('a').click(); $('body').load('LearnClickBi

【JS 设计模式 】门面模式之DOM元素绑定事件

门面模式的作用:一是简化类的接口,通过用一个接口(函数或方法)来封装复杂的逻辑代码从而客户端可以使用一个接口来调用它:二是消除类与使用它的客户代码之间的耦合,使客户代码和复杂的逻辑代码分离,也就是耦合: ?在何种情况下会使用:1)为一个复杂子系统提供一个简单接口.2)提高子系统的独立性.3)在层次化结构中,使用Facade模式定义系统中每一层的入口,使它们各尽其责. 用绑定事件来举例门面模式,IE浏览器和其它(火狐.谷歌)浏览器在对html元素绑定事件上是有区别的. ie绑定代码: var bu

DOM元素绑定事件的参数说明

当绑定在DOM元素上的事件处理写在标签中时,有两个已知常量,其名称被占用,分别是:event:表示事件对象, this:表示元素本身注意:若调用的脚本方法需要用到这两个对象,必须作为参数传递进来 当绑定在DOM元素上的事件处理未写在标签中时,而是纯粹通过脚本绑定,那么:脚本方法第1个形参:自动表示事件对象, this:自动表示元素本身注意:脚本方法的第1个形参名称无论是写event,还是x,或者a,都表示为Event事件对象,若没有写形参名称,还可通过arguments[0]来获取该Event事

Visual Event插件----查看html元素绑定的事件与方法的利器

WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤其是JavaScript加载事件的方式五花八门,可以透过jQuery.element.click = function() { }.element.addEventListener()…,很难由单一处找出所有事件.而理不清事件来龙去脉,要追踪某个点击动作背后的行为就变得有些困难,直到我们遇到以下两种

查看html元素绑定的事件与方法的利器

来源: http://www.cnblogs.com/xiaoyao2011/p/3447421.html WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤其是JavaScript加载事件的方式五花八门,可以透过jQuery.element.click = function() { }.element.addEventListener()…,很难

【转载】W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。

原文  http://blog.csdn.net/u011719449/article/details/23787627 在准备阿里前端面试的时候看到这么一道题. 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 这导致了我对冒泡和捕获又进一步深入的了解.(永远都在发现自己知识匮乏的日子中度过人生真是好抓急啊.) 首先冒泡和捕获是怎么一回事. 简单点说.冒泡就是从下往上,像鱼吐泡,泡泡是从下往上升的,也就是DOM元素被触法事件时(此时的dom元素为目标元素),目

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

绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 . 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 首先来了解一下冒泡和捕获是怎么回事: 1.冒泡 冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行.如下代码所示,

动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了

第一话:IE中用DOM方法绑定事件

工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值.下面进入主题: IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重的去思考和记录一下. 一.浏览器中不同的事件监听/绑定(个人感觉用监听比较通俗易懂): //IE element.attachEvent("event",functionname); //参数:1,表示监听的事件,需要在事件前加on(onclick,onfocus,onkeyevent……