转自：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的区别 真实例子的更多相关文章

  1. 一个非常简单的例子告诉你attachEvent和addEventListener的区别

    <input id="test" type="button" value="测试"> <script> var te ...

  2. js 添加事件 attachEvent 和 addEventListener 的区别

    1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...

  3. attachEvent和addEventListener区别总结

    1.attachEvent与addEventListener的区别 支持的浏览器不同.attachEvent在IE9以下的版本中受到支持.其它的都支持addEventListener. 参数不同.ad ...

  4. （转载）JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

  5. JS事件监听 JS:attachEvent和addEventListener 使用方法

    attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListene ...

  6. attachEvent和addEventListener

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...

  7. js中添加事件 attachEvent 与 addEventListener

    给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...

  8. attachEvent与addEventlistener兼容性

    关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题   请点击下面回答中的"采纳为答案&quo ...

  9. JavaScript中的attachEvent和addEventListener

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...

随机推荐

  1. 数据结构与算法系列----AC自己主动机

    一:概念 首先简要介绍一下AC自己主动机:Aho-Corasick automation,该算法在1975年产生于贝尔实验室,是著名的多模匹配算法之中的一个.一个常见的样例就是给出n个单词,再给出一段 ...

  2. Heap &amp; Priority Queue

    Heap & Priority Queue Definition & Description: In computer science/data structures, a prior ...

  3. 用户'sa'登录失败（错误18456）解决方案图解

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://thenear.blog.51cto.com/4686262/865544 htt ...

  4. Install Server Backup Manager on CentOS, RHE, and Fedora

    Skip to end of metadata Added by Internal, last edited by Internal on Aug 25, 2014 Go to start of me ...

  5. JavaScript读书笔记（4）-变量、作用域和内存问题

    1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...

  6. Oracle比较时间大小

    1,比较当前时间与指定时间相差分钟数:    select sysdate,  sysdate - to_date('2007-04-03 13:45:39','yyyy-mm-dd hh24:mi: ...

  7. toad for oracle中文显示乱码

    toad for oracle中文显示乱码 数据入库的时候中文显示正常,在toad for oracleclient和页面显示都是乱码!!! 原因:在数据入库时候出现的问题. 解决方式: 在系统变量中 ...

  8. LeetCode(125)题解--Valid Palindrome

    https://leetcode.com/problems/valid-palindrome/ 题目: Given a string, determine if it is a palindrome, ...

  9. build a real-time analytics dashboard to visualize the number of orders getting shipped every minute to improve the performance of their logistics for an e-commerce portal

    https://cloudxlab.com/blog/real-time-analytics-dashboard-with-apache-spark-kafka/

  10. 调用Windows API实现GBK和UTF-8的相互转换

    GBK转UTF-8示例 GbkToUtf8.cpp #include <Windows.h> #include <iostream> #include <string&g ...