一个非常简单的例子告诉你attachEvent和addEventListener的区别

时间:2022-06-29 19:37:13
    <input id="test" type="button" value="测试">
    <script>
        var test = document.getElementById("test");

        if(test.addEventListener){
            test.addEventListener("click",function(){
                alert(this.id + "1");
            })
            test.addEventListener("click",function(){
                alert(this.id + "2");
            })
            test.addEventListener("click",function(){
                alert(this.id + "3");
            })
        }else{
            test.attachEvent("onclick",function(){
                alert(1);
            })
            test.attachEvent("onclick",function(){
                alert(2);
            })
            test.attachEvent("onclick",function(){
                alert(this.id);
            })
        }
    </script>

代码很简单,不解释。

IE6输出结果:undefined,2,1。不管点多少次都那样!

IE10输出结果:test1,test2,test3

结论:

执行顺序:attachEvent是逆序,addEventListener是正序。

参数:attchEvent要带上on,addEventListener还多了useCapture,就是在捕捉阶段就能触发。第三个参数看这里:http://www.cnblogs.com/loveyouyou616/p/3916345.html.

作用域:attchEvent使用的是window域,所以输出id的时候为undefined,addEventListener使用的是标签的域。