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对象 ...
随机推荐
- Resharper 8.2的“安装”问题
概述 完美解决Resharper 8.2的“安装”问题和VS2012写Javascript语句无法智能提示的问题: 目录 引言——Resharper 简介——安装——VS2012智能提示测试 引言 最 ...
- Solaris 目录与文件管理
熟悉系统目录结构 掌握27个常用命令 掌握针对目录.文件的操作 掌握查找与文件内容的操作 一.命令 命令:内部命令(不依赖其他文件,可以直接执行)与外部命令 .他是用于实现某一类功能的指令或程序,其执 ...
- 《后会无期》票房赶超《小时代3》 大数据解读韩寒VS四娘之争
7月25日.韩寒导演的处女作<后会无期>零点首映,而郭四娘导演的<小时代3:刺金时代>比<后会无期>早上映一周.也就是7月17日正式公映,韩寒与四娘之间向来不缺乏话 ...
- Django-admin导出到表格
class AdminReport(admin.ModelAdmin): actions = ["saveexecl"] # 自定义的action(导出到excel表格) list ...
- Coder-Strike 2014 - Round 2
t题目链接:Coder-Strike 2014 - Round 2 A题:简单水题,注意能加入反复的数字.因此仅仅要推断是否能把Min和Max加入好.就能够了 B题:开一个sum计算每一个聊天总和,和 ...
- Spring mvc接受集合类型参数的方法
public String xxxxx(String xxxx, String xxxxx, @RequestParam("parameterList[]") List<St ...
- 基于注解的Sping AOP详解
一.创建基础业务 package com.kang.sping.aop.service; import org.springframework.stereotype.Service; //使用注解@S ...
- java代码中的三元表达式
1.格式 布尔型表达式?a:b,例子:boolean c;int a=1,b=2;c=a>b?10:15,这样子最终返回的结果是15
- 【Effective C++】让自己习惯C++
条款01:视C++为一个语言联绑 C++的四个语言层次: C:C++是以C为基础的.基本数据类型.语句.预处理器.数组.指针等统统来自C. Oject-Oriented C++:面向对象这一特性包含了 ...
- SIP学习笔记 -- RFC 3261
1.SDP (rfc 4566) 1)用于交换参数 2)内容分三部分Session description, Time description and Media description ...