js中的事件,一般有两种写法:
1、常规:o.onclcik=fn(){}
常规方法比较好理解(一般事件前选用“on...” ie你懂得,其他的也可以兼容)
不过对一个对象进行相同事件处理的时候,容易引发方法覆盖
var div=document.getElementById("div1");
div.onclick=function(){ alert(1) }
div.onclick=function(){ alert(2) }
div.onclick=function(){ alert(3) }
只弹出3
2、事件绑定:
可以避免常规的方法覆盖,有利多人协作
在封装一些方法,需要后期修改“事件”的时候优势很明显
好现在聊聊浏览器兼容吧,额!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!
ie: o.attachEvent(ev,fn);(他命的是this指向,默认都是指向window的得call() “靠!”一下)
w3c: o.addEventListener(ev,fn,false);
像我这样倾向于用原生js的同学们,封装是务必要做的工作,废话少说下面直接给方法:
function on(o,ev,fn){ if(o.addEventListener){//ff,webkit o.addEventListener(ev,fn,false); }else if(o.attachEvent){//ie 8- o.attachEvent('on'+ev,function(){//默认指向window fn.call(o,arguments); //改变this指向 }); } }
现在再试试:
on(div,"click",function(){alert(1)})
on(div,"click",function(){alert(2)})
on(div,"click",function(){alert(3)})
w3c:1,2,3
ie:3,2,1
说不上 完美!!! 但是最起码都有啦
关于事件绑定和ie的this指向,个人感觉这篇文章也是不错的attachEvent 中this指向 有兴趣可以看看