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

  • 相关阅读:
    游戏中心 & 内购
    使用storyboard显示UITableView时,如果不修改系统默认生成的tableView:cellForRowAtIndexPath:方法中的代码,则必须为UITableViewCell注册(填写)重用标识符:identifier.必须要代码方法中的标识符一致.
    《Linux就该这么学》学习记录
    《CSS世界》学习记录
    2019年书摘汇总
    《花间集》书摘
    《小山词》书摘
    《云边有个小卖部》书摘
    《喜宝》书摘
    《夏摩山谷》书摘
  • 原文地址:https://www.cnblogs.com/Rosefxd/p/4921330.html
Copyright © 2011-2022 走看看