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对象 ...
随机推荐
- MOS简介
功率半导体器件机能 MOS管(击穿原因),它采用“超级结”(Super-Junction)结构,故又称超结功率MOSFET.全数字控制是发展趋势,已经在很多功率变换设备中得到应用.既管理了对电网的谐波 ...
- Creating Tabbed Applications
新建一个空工程,如图 新建类 using System; using UIKit; namespace TabbedApplication { public class TabController : ...
- LINQ to SQL 语句(1)之 Where
LINQ to SQL 语句(1)之 Where Where 操作 适用场景:实现过滤,查询等功能. 说明:与 SQL 命令中的 Where 作用相似,都是起到范围限定也就是过滤作用的 ,而判断条 件 ...
- EasyRTMP安卓Android手机直播之AAC采集、编码与RTMP推送
本文转自EasyDarwin团队Kim的博客:http://blog.csdn.net/jinlong0603/article/details/52963378 EasyRTMP Android版de ...
- Activity和ListActivity的区别
http://book.51cto.com/art/201007/212051.htm
- ArcGIS10和ArcGIS10.1关于AO Licence初始化的问题
两个版本主要是esriLicenseProductCode.esriLicenseProductCodeArcInfo和esriLicenseProductCode.esriLicenseProduc ...
- 记一次FastJSON和Jackson解析json时遇到的中括号问题
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jadyer/article/details/24395015 完整版见https://jadyer. ...
- 【C语言天天练（十九）】restrict关键词
引言:在内核的系统调用函数里,常常遇到函数的參数使用restrict限定词限定的情况,以下就对该关键词做个总结. 1.restrict关键词是C99特性才加入的,因此在编译使用含有该限定词的程序时,一 ...
- win10搭建selendroid测试环境
官网对于搭建selendroid列出如下要求: 就如 Junit 一样,Selendroid 可以在 Mac,Linux 和 Windows 上使用.Java 主打的就是跨平台. Java SDK ( ...
- progressbar请求数据 加载demo1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...