js事件小结

浏览数：29 / 时间：2015年06月09日

首先事件绑定分为2种方法

一种为"DOM0级"方法，这里我理解为事件指定

            var oDiv = document.getElementById("div1");

             oDiv.onclick = function(){
                alert(this.id);
            };

第二种为"DOM2级"方法我理解为绑定

IE8及以下：attachEvent(on+事件名,执行的函数);

其他浏览器（IE9+ FF chrome之类的）：addEventListener(事件名,执行函数,为true的时候是在捕获阶段执行函数，但常用的是false，在冒泡阶段执行函数);

兼容写法：

function addEvent(obj,ev,fn){

                if(obj.attachEvent)
                {
                    obj.attachEvent("on"+ev,fn);
                }
                else
                {
                    obj.addEventListener(ev,fn,false);
                }

}

值得注意的是：

1、与DOM2 与 DOM0 区别在于

addEvent("click",oDiv,function(){alert(111)});
addEvent("click",oDiv,function(){alert(222)});
//以上2行都有效，也就是可以给oDiv绑定2种不同的click事件;执行2次
//alert(111);alert(222)

//而DOM0则不行;最后定义的会覆盖前面；只执行1次 alert(222)

oDiv.onclick = function(){alert(111)};
oDiv.onclick = function(){alert(222)};

特别注意IE的坑！！

attachEvent绑定的方法里面的this==window 而 addEventListener绑定的方法里面的this==绑定的对象

oDiv.attachEvent("onclick",function(){

alert(this==window);//true

})


oDiv.addEventListener("onclick",function(){

alert(this==window);//false
alert(this==oDiv)//true

})