http://web.jobbole.com/82503/
Javascript中的事件经常被认为如谜一般不可解。Javascript是一个事件驱动的语言，在这样的前提下前面的看法是很奇怪，但是说到它们的复杂本质和调试难度时，这样的看法又是很正常的。为此，我创建了可视化事件（Visual Event）来查看DOM节点上绑定的事件。
简介
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对象数组：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
[
{
"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, from Function.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 the event (e.g. "jQuery 1.7")
},
...
]
},
...
]
|
建立Visual Event
为了能运行本地的Visual Event副本，你必须先建立一个Visual Event，因为这个过程会有文件级联操作，即将库中的解析器移动到主文件中。建立的过程中还同时会建立 JSDoc文 档并压缩 JS 文件（除非是调试生成的）。
为了建立Visual Event，你在终端只需要一个能运行bash脚本并能输入“./build .sh debug”命令的系统。这会在建立Visual Event和正确的载入器的目录中的“builds”目录里创建一个新目录（注意时间戳是用于防止开发和部署过程中boolmarklet的缓存问题）。以下是建立过程的脚本的使用实例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Visual Event build script - usage:
./build.sh [loader-dir] [debug]
loader-dir - The web-address of the build files. Note that the build
directory name 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
Example deploy build:
./build.sh sprymedia.co.uk/VisualEvent/builds
Example debug build:
./build.sh localhost/VisualEvent/builds debug
|
文件“bookmarklet.html”是为了使你能方便地建立你自己的书签载入器。通常你只需要修改书签的路径地址。链接会在每次按键时更新，你只需要像你安装其他书签插件一样去安装它。