首先事件绑定分为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 })
时间: 2024-10-15 20:43:37