事件绑定之小测试  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中面向对象技术的模拟
Sep 25 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Vue生命周期示例详解
Apr 12 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
详解Python中find()方法的使用
2015/05/18 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python networkx包的实现
2020/02/14 Python
Python图像读写方法对比
2020/11/16 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
公司门卫管理制度
2014/02/01 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Java详细解析==和equals的区别
2022/04/07 Java/Android
Python的property属性详细讲解
2022/04/11 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript