查看html元素绑定的事件与方法的利器
2013-11-28 12:13
211 查看
WEB标准提倡结构、表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤其是JavaScript加载事件的方式五花八门,可以透过jQuery、element.click = function() { }、element.addEventListener()…,很难由单一处找出所有事件。而理不清事件来龙去脉,要追踪某个点击动作背后的行为就变得有些困难,直到我们遇到以下两种利器。
chrome开发者工具有查看HTML元素绑定事件的功能,如下图所示:
chrome开发者工具有查看HTML元素绑定事件的功能,如下图所示:
但这种方式查看事件的方法还是有点困难,直到遇到它chrome的插件 Chrome Web Store - Visual Event
Visual Event的运作原理,在于其熟知主要JavaScript库(例如: jQuery、YUI、ExtJS)事件机制,可深入其中撷取事件,并将其标注在对象元素上。目前支持的JS库包括:DOM 0 events jQuery 1.2+ YUI 2 MooTools 1.2+ Prototype 1.6+ Glow
在启用Visual Event后,有绑定事件元素将被标上蓝色区块,滑鼠停留时会显示事件的细节。如下图所示:
相关文章推荐
- Html.BeginForm与Ajax.BeginForm
- 网页实战开发笔记之——最全面的HTML的头部信息介绍
- 常用正则表达式大全!(例如:匹配中文、匹配html)
- 转载MVC Html.AntiForgeryToken() 防止CSRF攻击
- html网页自动跳转代码
- HTMLUnit web测试
- HtmlParser入门
- innerHTML用法
- 使一个html 文本框(text)不可用
- HTML中行内元素与块级元素有哪些及区别?
- Html URL参数获取
- 使用正则表达式删除HTML标签。
- DOM、HTML DOM、XML DOM
- DOM(一)——HTML DOM
- HTML页面加载流程
- HTML标签A的onclick动作提交form问题(转)
- html 输入框 只能输入数字 只能输入字母数字组合
- HtmlDOM 文档读取研究
- 采用beautifulsoup库 解析html页面
- <img src="中文文件名" /> 无法显示图片,图片名改成英文就可以显示;试了下在电脑桌面写了个HTML测试下,可以显示中文名称的图片,解决方法