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

所属分类: 网络编程 / JavaScript 阅读数: 1691
收藏 0 赞 0 分享
开发工具中应该有相应的功能,于是测试之:
前提:只是一个简单的小测试,而且 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>

页面效果如下截图:

 

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

FIREFOX:

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

image

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

image

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

image

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

2,选中 test2 元素:

image

右侧 DOM 标签:

image

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

image

3,选中 test3 元素:

image

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

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

-----

OPERA:

1,在 Opera 的 Dragonfly 中选中 test1 :

image

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

image

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

image

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

image

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

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

3,选择 test3:

image

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

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

-----

CHROME:

Chrome 下就清晰很多了:

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

image

看看右侧的信息位:

image

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

image

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

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

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

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

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

image

2,选中 test3

image

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

image

但是注意这里的 div#test3:

image

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

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

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多