一个非常简单的例子告诉你attachEvent和addEventListener的区别
<input id="test" type="button" value="测试">
<script>
var test = document.getElementById("test"); if(test.addEventListener){
test.addEventListener("click",function(){
alert(this.id + "1");
})
test.addEventListener("click",function(){
alert(this.id + "2");
})
test.addEventListener("click",function(){
alert(this.id + "3");
})
}else{
test.attachEvent("onclick",function(){
alert(1);
})
test.attachEvent("onclick",function(){
alert(2);
})
test.attachEvent("onclick",function(){
alert(this.id);
})
}
</script>
代码很简单,不解释。
IE6输出结果:undefined,2,1。不管点多少次都那样!
IE10输出结果:test1,test2,test3
结论:
执行顺序:attachEvent是逆序,addEventListener是正序。
参数:attchEvent要带上on,addEventListener还多了useCapture,就是在捕捉阶段就能触发。第三个参数看这里:http://www.cnblogs.com/loveyouyou616/p/3916345.html.
作用域:attchEvent使用的是window域,所以输出id的时候为undefined,addEventListener使用的是标签的域。
一个非常简单的例子告诉你attachEvent和addEventListener的区别的更多相关文章
- netty-1.从一个最简单的例子开始
(原) 第一篇,从一个最简单的例子开始 1.netty是干什么,怎么用,这里不作介绍,先从一个例子来了解它, netty 5.0以上的版本被废弃了,以下例子从4.1.10.Final版本开始. 2.一 ...
- attachEvent与addEventListener的区别 真实例子
转自:https://www.cnblogs.com/Rosefxd/p/4921330.html 近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~ 先普 ...
- js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...
- [编译] 1、第一个makefile简单例子
前言 本篇用一个最简单的例子引入makefile,教你编写第一个makefile 正文 在Download/aa文件夹下有a.c和makefile文件 litao@litao:~/Downloads/ ...
- 为什么C语言在2013年仍然很重要:一个简单的例子
附注:在最初的文章里,我没说明进行模2^64的计算——我当然明白那些不是“正确的”斐波那契数列,其实我不是想分析大数,我只是想探寻编译器产生的代码和计算机体系结构而已. 最近,我一直在开发Dynvm— ...
- 一个简单的例子理解Kubernetes的三种IP地址类型
很多Kubernetes的初学者对Kubernetes里面三种不同的IP地址和工作机制理解得不是很清楚. 本文我们通过一个最简单的例子来学习. 用如下命令行创建一个基于nginx的deployment ...
- attachEvent和addEventListener区别总结
1.attachEvent与addEventListener的区别 支持的浏览器不同.attachEvent在IE9以下的版本中受到支持.其它的都支持addEventListener. 参数不同.ad ...
- Spring-Context之一:一个简单的例子
很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...
- 扩展Python模块系列(二)----一个简单的例子
本节使用一个简单的例子引出Python C/C++ API的详细使用方法.针对的是CPython的解释器. 目标:创建一个Python内建模块test,提供一个功能函数distance, 计算空间中两 ...
随机推荐
- c语言项目开发流程二部曲
一.在第一部曲中我们介绍了电子词典项目开发的前5步,下面继续我们的步伐. 6.函数接口设计,这一步不是一蹴而就的,在项目进行中得不断修改,下面是我电子词典项目接口. /**************函数 ...
- Targeted Learning R Packages for Causal Inference and Machine Learning(转)
Targeted learning methods build machine-learning-based estimators of parameters defined as features ...
- Zepto源码分析-callbacks模块
// Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...
- JVM类加载以及执行的实战
前几篇文章主要是去理解JVM类加载的原理和应用,这一回讲一个可以自己动手的例子,希望能从头到尾的理解类加载以及执行的整个过程. 这个例子是从周志明的著作<深入理解Java虚拟机>第9章里抄 ...
- 用java实现简单快速的webservice客户端/数据采集器(支持soap1.1和soap1.2标准,支持utf-8编码)
前言: 用了cxf,axis等各种wbeservice实现库,简单试用了一下动态调用的方式,很不满意,完全无法满足业务的需要,所以自己实现了一个webservice采集客户端,方便动态调用外部webs ...
- jdbc的配置及jdbc连接常用数据库(mysql、sqlserver、Oracle)
1.连接SQL Server数据库 import java.sql.*; publicclassMain{publicstaticvoid main(String[] args){String dri ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- DOM事件类型总结大全
unload:事件在用户退出页面时发生 window.onload = function(){ return "页面关闭!"; }; onblur:失去焦点发生变化 window. ...
- 【转载】图文详解 IntelliJ IDEA 15 创建普通 Java Web 项目
第 1 部分:新建一个 Java Web Application 项目 File -> New -> Project-,请选择 Java EE 这个模块下的 Web Application ...
- js___原生js轮播
原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...