事件绑定之小测试  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 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
如何在PHP中使用数组
2020/06/09 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
Javascript缓存API
2016/06/14 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
AngularJS中的作用域实例分析
2018/05/16 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
浅谈django 重载str 方法
2020/05/19 Python
寒假思想汇报
2014/01/10 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers