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对象 ...
随机推荐
- who命令
who1.c #include <stdio.h>#include <utmp.h>#include <fcntl.h>#include <unistd.h& ...
- python（16）- python内置函数
python内置了一系列的常用函数,以便于我们使用,python英文官方文档详细说明:https://docs.python.org/3/library/functions.html Buil ...
- Django小项目练习
Django学生管理系统 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^class_list/', views.class_list ...
- Process Autocad by python
一.处理AutoCad模块 -pyautocad 1.安装 pip install pyautocad 注:1.该操作会自动安装 comtypes模块,如果其他方式安装,请自行安装comtypes模块 ...
- mongoDB之监控工具mongostat及其参数的具体含义
mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数据库突然变慢或者有其他问题的话,你第一手的操作就考虑采用mon ...
- iOS側拉栏抽屉效果Demo
源代码下载 側拉栏抽屉效果Demo 须要导入第三方的类库例如以下: 抽屉效果所需第三方类库下载 效果:既能够两側都实现抽屉效果也可仅仅实现左側栏或者右側栏的抽屉效果 waterm ...
- 负载均衡实现，一个域名对应多个IP地址
负载均衡实现,一个域名对应多个IP地址 - 宏宇 - 博客园 https://www.cnblogs.com/cuihongyu3503319/archive/2012/07/09/2583129.h ...
- 阿里Java开发手册学习 3 MYSQL规约
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- div和span、relative和absolute、display和visibility的区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
- SCAU 还有两个东西 —— 异或
竞赛题 F 还有两个东西 Time Limit:400MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 给出n( n >= 2 )个整数,其中有 2 个 ...