attachEvent与addEventListener的区别真实例子

最新推荐文章于 2024-10-12 14:19:41 发布

weixin_33950035

最新推荐文章于 2024-10-12 14:19:41 发布

阅读量78

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sharpest/p/6476784.html

本文通过实际测试对比了attachEvent与addEventListener两种事件处理方式在不同浏览器中的兼容性表现。attachEvent主要兼容IE7和IE8，而addEventListener则广泛应用于现代浏览器如Firefox、Chrome等。

转自：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>