事件绑定之小测试  onclick && addEventListener


Posted in Javascript onJuly 31, 2011

开发工具中应该有相应的功能,于是测试之:
前提:只是一个简单的小测试,而且 addEventListener 属于标准绑定函数,IE 中与此不兼容(IE 相应的是 attachEvent),所以此次测试先抛弃 IE,使用 Firefox 5.0.1, Chrome 14.0, Opera 11.50
测试页面:

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
.test { 
background-color: #FFF; 
border: 1px solid gray; 
height: 100px; 
width: 100px; 
margin: 0 10px 0; 
float: left; 
} 
</style> 
</head> 
<body> 
<div id="test1" class="test" onclick="console.log('test1 : click!');" onmouseover="console.log('test1 : mouseover!');">TEST1</div> 
<div id="test2" class="test">TEST2</div> 
<div id="test3" class="test">TEST3</div> 
<script type="text/javascript"> 
(function(){ 
var $ = function(o){//Simple Tool 
return document.getElementById(o); 
} 
//For Test2: 
$('test2').onclick = function(){console.log('test2 : click!');} 
$('test2').onmouseover = function(){console.log('test2 : mouseover!');} 
//For Test3: 
$('test3').addEventListener('click', function(){ 
console.log('test3 : click!'); 
}, false); 
$('test3').addEventListener('mouseover', function(){ 
console.log('test3 : mouseover!'); 
}, false); 
})(); 
</script> 
</body> 
</html>

页面效果如下截图:

 事件绑定之小测试  onclick &amp;&amp; addEventListener

测试代码中采用了三种最常见的事件绑定方法

FIREFOX:

1,Firefox 的 Firebug 中选中 test1 元素:

事件绑定之小测试  onclick &amp;&amp; addEventListener

右侧 DOM 标签中选择显示所有属性:

事件绑定之小测试  onclick &amp;&amp; addEventListener

在其中找到了 attributes 数组,如下:

事件绑定之小测试  onclick &amp;&amp; addEventListener

这是因为 test1 元素的两个事件句柄直接写到了元素中,再往下的列表中找不到更多相关的信息,此种绑定模式下只能在 firebug 的 DOM 标签的 attributes 中找到事件句柄。

2,选中 test2 元素:

事件绑定之小测试  onclick &amp;&amp; addEventListener

右侧 DOM 标签:

事件绑定之小测试  onclick &amp;&amp; addEventListener

test2 采用在 javascript 中绑定事件句柄的方式,被作为“用户自定义属性”显示在了 DOM 标签中,右击鼠标可以查看相关信息:

事件绑定之小测试  onclick &amp;&amp; addEventListener

3,选中 test3 元素:

事件绑定之小测试  onclick &amp;&amp; addEventListener

这次在 DOM 标签中没有找到任何相关此元素绑定事件的信息。。。

总而言之,firebug 中在标准绑定事件函数下(addEventListener),并不好检测到某个元素已绑定的事件函数,(不要说尝试打印一下那个元素的 onclick 属性,addEventListener 绑定和 onclick 绑定毫不相干,此种情况下你会得到 nudefined);如果是在前两种事件绑定下,可以得到一些简单信息。

-----

OPERA:

1,在 Opera 的 Dragonfly 中选中 test1 :

事件绑定之小测试  onclick &amp;&amp; addEventListener

在右方的属性列表中可以找到相关的信息:

事件绑定之小测试  onclick &amp;&amp; addEventListener

点击加号同样可以查看绑定的函数信息:

事件绑定之小测试  onclick &amp;&amp; addEventListener

想查看某个函数体的话,有一种简单的方法,在控制台中直接输入:

事件绑定之小测试  onclick &amp;&amp; addEventListener

直接就打印出函数体,更加的方便!

2,选择 test2 test1 几乎相同,就不在赘述了;

3,选择 test3:

事件绑定之小测试  onclick &amp;&amp; addEventListener

右方的属性标签里找不到什么了,onclick 和 onmouseover 的值都为 null。

总而言之,Opera Dragonfly 和 Firefox Firebug 表现差不多,对在标准绑定函数下 某个元素绑定了哪些事件表达得不是很清晰。

-----

CHROME:

Chrome 下就清晰很多了:

1,在调试工具中选择 test1(或者 test2,这两者类似)

事件绑定之小测试  onclick &amp;&amp; addEventListener

看看右侧的信息位:

事件绑定之小测试  onclick &amp;&amp; addEventListener

Chrome 中的 Event Listeners 是一个不错的小工具,直接罗列出当前选中元素上面已经被绑定的监听函数,点击小黑三角可以查看绑定函数的信息:

事件绑定之小测试  onclick &amp;&amp; addEventListener

click 中有两项,第一项是 div#test1,这个就是我们绑定的 onclick 函数信息;第二项的 document 可以不去看(Chrome 自身的处理);

isAttribute: true :说明此 onclick 函数句柄是作为元素属性来对待的(因为我们用的是 onclick = function(){…},不管是 test1 还是 test2);

lineNumber: 18 :说明绑定函数的位置;

useCapture: false : 说明不使用事件捕获;其他的语义性很强,就不说了;

同样,在 Properties 的第一个 HTMLDivElement 列表中,test1 和 test2 中都能看到:

事件绑定之小测试  onclick &amp;&amp; addEventListener

2,选中 test3

事件绑定之小测试  onclick &amp;&amp; addEventListener

在 Properties 中 onclick 和 onmouseover 都会变成 null,但是 Event Listeners 仍旧是:

事件绑定之小测试  onclick &amp;&amp; addEventListener

但是注意这里的 div#test3:

事件绑定之小测试  onclick &amp;&amp; addEventListener

isAttribute 变成了 false,因为我们没有使用 onclick 属性,而是用的 addEventListener。

先记这些吧!写得有点乱~

Javascript 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
Javascript中的变量使用说明
May 18 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
javascript实现简单的进度条
Jul 02 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
学习javascript,实现插入排序实现代码
Jul 31 #Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 #Javascript
IE6下focus与blur错乱的解决方案
Jul 31 #Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 #Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 #Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 #Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
编程语言Python的发展史
2014/09/26 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python url 参数修改方法
2018/12/26 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python安装whl文件过程图解
2020/02/18 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
python 怎样进行内存管理
2020/11/10 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
工程管理专业毕业生自荐信
2014/01/24 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
小学班主任工作随笔
2015/08/15 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
Python安装使用Scrapy框架
2022/04/12 Python