【js实例大全】js中用实例体现attachEvent与addEventListener的区别

【www.bbyears.com--其它】

先普及一下基本知识：

attachEvent与addEventListener的作用：为某一事件附加其它的处理事件。

网上普遍都是说attachEvent用于非Mozilla系列，addEventListener用于Mozilla系列。

（Mozilla系列在浏览器而言，即指火狐浏览器，本人认为也可以指支持w3c标准的系列浏览器）

理论上是这么说，还是得自己动手试一试！

结合查阅资料写了以下代码进行测试：

    
    
    
    


    点我

<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>

运行结果注释在了上面代码中。（只测试了主流浏览器：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区别

target.addEventListener(type, listener, useCapture);
target 文档节点、document、window 或 XMLHttpRequest。
type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false
事件触发时，会将一个 Event 对象传递给事件处理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同，同时在使用的过程中要注意
attachEvent方法          按钮onclick       IE中使用
addEventListener方法    按钮click       fox中使用
两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样：
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1
如果是Mozilla系列，并不支持该方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
实例：(要注意的是div必须放到js前面才行)

点击

本文来源：http://www.bbyears.com/luyouqishezhi/87035.html