zoukankan      html  css  js  c++  java
  • attachEvent与addEventListener的区别 真实例子

    近日遇到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标准看齐。

  • 相关阅读:
    OneNote2007产品密钥及激活方法
    穿着马甲的编码方式链式
    String 转换NameValueCollection 的方法 , 这是原创 嘎嘎
    TransactionScope分布式事务无法使用时, 配置并启动 MSDTC 的解决方案
    Spirit越狱3.1.3/3.2固件(Windows)
    智能感知 不正常的解决方法
    HttpHandler HttpModule入门篇
    Microsoft.Practices.Unity依赖注入使用实例
    ViewEngine 深入解析与应用实例
    打开chm文件提示“已取消到该网页的导航”的解决方案
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/4921330.html
Copyright © 2011-2022 走看看