原生js：事件綁定（call，修改this指向）

js中的事件，通常有兩種寫法：

一、常規：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

 

二、事件綁定：

能夠避免常規的方法覆蓋，有利多人協做

在封裝一些方法，須要後期修改「事件」的時候優點很明顯

好如今聊聊瀏覽器兼容吧，額！！！！！！！！！！！！！！！！！ ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

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指向 有興趣能夠看看