• 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标准看齐。

  • 相关阅读:
    【6666】分组背包
    Designing a RESTful API with Python and Flask 201
    把手账打印成书 把回忆装订成册
    sql基本操作语句
    sql serve基础
    sql serve存储过程
    TCP/IP 之 大明王朝邮差 (转)
    HBASE基础(4):语法(2) API (1) DDL
    bochsrc
    CentOS 6 bochs-2.6 gdb 调试 linux 0.11——bochsrc-hdc-gdb.bxrc
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/4921330.html
Copyright © 2020-2023  润新知