attachEvent与addEventListener的区别 真实例子
转自：https://www.cnblogs.com/Rosefxd/p/4921330.html
近日遇到attachEvent与addEventListener两个事件，哟，果断研究一下~~
先普及一下基本知识：
attachEvent与addEventListener的作用：为某一事件附加其它的处理事件。
网上普遍都是说attachEvent用于非Mozilla系列，addEventListener用于Mozilla系列。
（Mozilla系列在浏览器而言，即指火狐浏览器，本人认为也可以指支持w3c标准的系列浏览器）
理论上是这么说，还是得自己动手试一试！
结合查阅资料写了以下代码进行测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attachEvent与addEventListener区别</title>
<style type="text/css"> </style>
</head> <body>
<button id="btn1">点我</button> </body>
<script type="text/javascript">
var btn1Obj = document.getElementById("btn1"); function method1(){
alert("method1");
}
function method2(){
alert("method2");
}
function method3(){
alert("method3");
}
function attachEventListen(obj,e,fun){
/*obj.attachEvent ? obj.attachEvent("on"+e,fun) : obj.addEventListener(e,fun,false);*/
obj.attachEvent("on"+e,fun);//测试浏览器，发现：firefox、chrome、IE9、IE10、IE11、safari、opera都不兼容,IE7、IE8兼容，
//obj.addEventListener(e,fun,false);//测试浏览器，发现：firefox、chrome、IE、safari、opera都兼容，IE7、IE8不兼容， } attachEventListen(btn1Obj,"click",method1);
attachEventListen(btn1Obj,"click",method2);
attachEventListen(btn1Obj,"click",method3); </script>
</html>
运行结果注释在了上面代码中。（只测试了主流浏览器：IE7-11、firefox、chrome、opera、safari）
总结起来就是：
attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
由此也可以看出，从IE9开始，很多JS也已经按照W3c的标准；其他主流浏览器也在向W3c标准看齐。
attachEvent与addEventListener的区别 真实例子的更多相关文章
- 一个非常简单的例子告诉你attachEvent和addEventListener的区别
<input id="test" type="button" value="测试"> <script> var te ...
- js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...
- attachEvent和addEventListener区别总结
1.attachEvent与addEventListener的区别 支持的浏览器不同.attachEvent在IE9以下的版本中受到支持.其它的都支持addEventListener. 参数不同.ad ...
- （转载）JS事件监听 JS:attachEvent和addEventListener使用方法
(转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...
- JS事件监听 JS:attachEvent和addEventListener 使用方法
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法 按钮onclickaddEventListene ...
- attachEvent和addEventListener
attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...
- js中添加事件 attachEvent 与 addEventListener
给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...
- attachEvent与addEventlistener兼容性
关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题 请点击下面回答中的"采纳为答案&quo ...
- JavaScript中的attachEvent和addEventListener
attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...
随机推荐
- linux下的环境文件设置说明
工作环境设置文件 环境设置文件有两种:系统环境设置文件 和 个人环境设置文件 1.系统中的用户工作环境设置文件: 登录环境设置文件:/etc/profile 非登录环境设置文件: ...
- Java如何Attachment源码
该文章教你如何在Eclipse中Attachment源码,学到了不少东西. http://jingyan.baidu.com/article/1709ad80b107f64635c4f040.html ...
- 利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model
利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model 使用场景:网站配置项目,为了便于管理,网站有几个Model类来管理配置文件, 比如ConfigWebsiteMo ...
- 【每日Scrum】第八天（4.29） TD学生助手Sprint2
站立会议 组员 今天 签到 刘铸辉 (组长) 绩效考核 Y 刘静 测试用例书写 测试bug报告 测试详细报告 Y 解凤娇 Y 王洪叶 项目可行性报告 项目开发计划书 需求分析(已完成并发布) Y 胡宝 ...
- javaweb dev 入
::::关于jsp页面和servlet之间传递参数 JSP与 servlet之间的传值有两种情况:JSP -> servlet, servlet -> JSP. 通过对象 request和 ...
- 使用 Kingfisher 处理网络图片的读取与缓存
Kingfisher 是一个读取网络图片和处理本地缓存的开源库,由 onevcat 开发.提到图片缓存库,那么熟悉 Objective-C 开发的同学,可能会想起 SDWebImage. 没错,Kin ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- spring源码解析——2容器的基本实现（第2版笔记）
感觉第二版写的略潦草,就是在第一版的基础上加上了新的流行特性,比如idea,springboot,但是,潦草痕迹遍布字里行间. 虽然换成了idea,但是很多截图还是eclipse的,如果不是看了第一版 ...
- 我们将要建立的EasyDarwin开源社区
从12年12月我开始建立EasyDarwin开源项目,已经三年多的时间了,从开始最简单的一个开源流媒体服务器项目,如今已经发展成为目前国内最大的一个流媒体开源社区,截至目前已经有十几个项目在Githu ...
- HDFS被设计成能够在一个大集群中跨机器可靠地存储超大文件
HDFS被设计成能够在一个大集群中跨机器可靠地存储超大文件.它将每个文件存储成一系列的数据块,除了最后一个,所有的数据块都是同样大小的.为了容错,文件的所有数据块都会有副本.每个文件的数据块大小和副本 ...