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对象 ...
随机推荐
- vs项目添加链接文件
在vs2012(或以后版本)中,从一个项目中拖拽文件到另一项目,并按住alt键,会生成链接文件. 项目文件中会生成link节点. <ItemGroup> <Compile Inclu ...
- MapReduce 1工作原理图文详解
MapReduce工作原理图文详解 一 MapReduce程序执行流程 程序执行流程图如下: 流程分析:1.在客户端启动一个作业.2.向JobTracker请求一个Job ID.3.将运行作业所需要的 ...
- JAVA RMI远程方法调用简单实例（转载）
来源:http://www.cnblogs.com/leslies2/archive/2011/05/20/2051844.html RMI的概念 RMI(Remote Method Invocati ...
- commons io上传文件
习惯了是用框架后,上传功能MVC框架基本都提供了.如struts2,springmvc! 可是假设项目中没有使用框架.而是单纯的使用jsp或servlet作为action,这时我们就能够使用commo ...
- MVC3 类型 System.Web.Mvc.ModelClientValidationRule 同时存在
用文本编辑器打开 工程名称 .csproj 找到 1. <Reference Include="System.Web.WebPages" /> 2. <Refe ...
- AAC包增加ADTS头Without MediaCodec
AAC原始码流无法直接播放,一般需要封装为ADTS格式才能再次使用,本博主在android中用MediaCodec编码得到的AAC就是raw格式,为了保存为.aac格式,需要增加adts头,这样就可以 ...
- Python笔记——基本数据结构:列表、元组及字典
转载请注明出处:http://blog.csdn.net/wklken/archive/2011/04/10/6312888.aspx Python基本数据结构:列表,元组及字典 一.列表 一组有序项 ...
- 判断一个IP地址是否是本局域网内地址
// /// <summary> /// 判断一个IP地址是否是本局域网内地址,是返回true 否则返回false, /// </summa ...
- less 一种 动态 样式 语言
LESS « 一种动态样式语言 http://www.bootcss.com/p/lesscss/ 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数 ...
- finding friends with mapreduce
http://stevekrenzel.com/finding-friends-with-mapreduce