工具-监测页面有哪些事件的小工具 Visual Event
来源:互联网 发布:线切割绘图编程步骤 编辑:程序博客网 时间:2024/06/06 19:33
最近发现一个很好用的小工具Visual Event,在GitHub开源,用来检测页面中共有多少个事件,直接在页面展示,直观使用。对Visual Event 使用文档翻译如下,最后附上原文链接。
Javascript中的事件经常被认为如谜一般不可解。Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它们的复杂本质和调试难度时,这样的看法又是很正常的。为此,我创建了可视化事件(Visual Event)来查看DOM节点上绑定的事件。
简介
VisualEvent是一个开源 Javascript 书签,能提供绑定在DOM元素上的事件调试信息。VisualEvent能显示如下信息:
1、哪一个元素有事件绑定
2、某元素上绑定的事件类型
3、事件触发后运行的代码段
4、定义绑定函数的源文件和行号(仅限于WebKit和Opera浏览器)
除了对调试你自己的代码大有用途,VisualEvent还能被用作教学工具,显示发起了多少网站。
VisualEvent是开源软件(GPLv2),并且在GitHub上有一个Git仓库目录,供你去提交或照你所想的去修改
安装
由于Visual Event是一个小书签,所以在任何网页上安装和运行它都很简单:
1、拖拽右侧的“Visual Event”链接到你的书签栏上:Visual Event
2、载入一个使用了浏览器所能支持的js库的网页
3、点击书签栏中的“Visual Event”
4、查看绑定在文档元素上的事件处理器
自动载入的Visual Event例子在这里有提供。这个例子使用DataTables创建了一个不同元素上绑定了许多事件的测试页面。
如何工作
W3C 没有提供标准的方法推荐能发现特定元素上绑定事件的DOM接口。尽管这似乎是个疏忽,也有一个建议方法能将3级DOM规范的 eventListenerList 属性包含进来,但很不幸的是,在后来的草案中这个方法被移除了。因此,我们不得不研究独立的通常能维护一个事件的高速缓存的Javascript库(所以它们能在后来被移除并执行其他有用的抽象化)。
因此,Visual Event为了能显示事件,它必须能够从 JS 库中解析出事件信息。目前VisualEvent能支持的库有如下这些:
DOM 0events
jQuery1.2+
YUI 2
MooTools1.2+
Prototype1.6+
Glow
ExtJS4.0.x
如何设计
VisualEvent是个开源软件,在GPLv2证书下可以获得。通过Git实现开源控制,而且该项目在GitHub 上有一个网页。事实上任何对Visual Event的提高有帮助的建议都是十分受欢迎的!如果你遇到什么问题,请在 GitHub上将你遇到的问题作为讨论(issue)展开,包括出现问题的网页链接地址。Fork代码以及合并分支(pullrequest)也同样被鼓励!
你可能有一个很感兴趣的地方,就是如何能添加对额外Javascript库的支持。关键是能够获取到该库使用的事件缓存,因为没有事件缓存就不可能知道哪个节点有事件以及绑定代码。
VisualEvent类有一个静态数组叫做“VisualEvent.parsers”,它是一个函数的数组——想增加一个新的解析器,只需要将你的函数加到这个数组里。这个函数必须返回一个带有以下参数的javascript对象数组:
[ { "node":{element}, //The DOM element that has attached events "listeners":[ //Array of attached events { "type":{string}, // The event type - click, change, keyup etc "func":{string}, // The code that will handle the event, fromFunction.toString() "removed":{boolean}, // If the event has been removed or not (typically will be false,but used if the library doesn't remove the event from its cache) "source":{string} // Library name and version that attached theevent (e.g. "jQuery 1.7") }, ... ] }, ...]
建立Visual Event
为了能运行本地的Visual Event副本,你必须先建立一个Visual Event,因为这个过程会有文件级联操作,即将库中的解析器移动到主文件中。建立的过程中还同时会建立 JSDoc文 档并压缩 JS 文件(除非是调试生成的)。
为了建立Visual Event,你在终端只需要一个能运行bash脚本并能输入“./build.sh debug”命令的系统。这会在建立VisualEvent和正确的载入器的目录中的“builds”目录里创建一个新目录(注意时间戳是用于防止开发和部署过程中boolmarklet的缓存问题)。 以下是建立过程的脚本的使用实例:
VisualEvent build script - usage: ./build.sh[loader-dir] [debug] loader-dir- The web-address of the build files. Note that the build directoryname is automatically appended. For example: localhost/VisualEvent/builds- default if no option is provided sprymedia.co.uk/VisualEvent/builds debug- Debug indicator. Will not compress the Javascript Exampledeploy build: ./build.shsprymedia.co.uk/VisualEvent/builds Exampledebug build: ./build.shlocalhost/VisualEvent/builds debug
文件“bookmarklet.html”是为了使你能方便地建立你自己的书签载入器。通常你只需要修改书签的路径地址。链接会在每次按键时更新,你只需要像你安装其他书签插件一样去安装它。
原文网址:http://www.sprymedia.co.uk/article/Visual+Event+2
GitHub:https://github.com/DataTables/VisualEvent
- 工具-监测页面有哪些事件的小工具 Visual Event
- DOS工具: 切换IP的小工具
- 页面构建小工具
- 用JAVA写一个监测Tomcat是否运行的监测小工具
- Visual Studio 中的小工具
- 刷页面流量小工具
- 前端页面开发小工具
- 一个简单的检查事件丢失的小工具
- 一些好用的查询页面元素的小工具
- Unity 动态为AnimationClip 注入事件的小工具类
- python编写查看是否有新邮件的小工具
- python编写查看是否有新邮件的小工具
- Android 有写入源码的小工具没?
- 一个小工具完成对memcached/kt/mongodb/redis的性能监测
- windows下的快速搜索工具EveryThing小工具推荐
- python小工具--tfrecords文件的制作工具
- 方便的小工具
- xorg的小工具
- 如何获取生产环境的 Device Token?
- 浅谈微信支付在生活中的便利之处
- Windows中进程的内存结构
- Dagger 2 初体验
- The content of the adapter has changed but ListView did not receive a notification
- 工具-监测页面有哪些事件的小工具 Visual Event
- ListView的优化
- HTML5 New Feature Series: WebSocket
- MSSQL2008数据同步浅析二(安装篇)
- redhat/centos修改yum源
- HTML5新特性之Web Workers
- Qt 知识的总结
- cocos2d-x 2.2.6
- 正则表达式