事件绑定之小测试  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 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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/12/14 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
小学班级口号
2014/06/09 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
社团活动总结格式
2014/08/29 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
python实现双向链表原理
2022/05/25 Python