JavaScript學習13：事件繫結

        事件繫結分為兩種：一種是傳統事件繫結（內聯模型、指令碼模型），一種是現代事件繫結（DOM2級模型）。現代事件繫結在傳統繫結的基礎上為我們提供了更強大更方便的功能。

        傳統事件繫結的問題

        因為內聯模型很少用，這裡不做討論。先來看一下指令碼模型，將一個函式賦值給一個事件處理函式。   

<span style="font-size:18px;">var box=document.getElementById('box');
box.onclick=function(){
	alert('Lian');
};
box.onclick=function(){
	alert('Jiang');
};</span>

        如此繫結事件有很多的問題，具體如下：

        1一個事件處理函式觸發兩次事件，後面的一個會把    前一個完全覆蓋掉

<span style="font-size:18px;">box.onclick=toBlue;
function toRed(){
	this.className='red';
	this.onclick=toBlue;
}
function toBlue(){
	this.className='blue';
	this.onclick=toRed;
}</span>

        2事件切換器，在進行擴充套件的時候，會出現三個問題：覆蓋，可讀性降低、this傳遞問題。

        編寫自定義事件處理函式，還有一個問題，那就是兩個相同函式名的函式誤註冊了多次，那麼應該把多餘的遮蔽掉。這樣自定義的話，就比較麻煩了。

        W3C事件處理函式

      DOM2級事件定義了兩個方法，用於新增事件和刪除事件處理程式的操作：addEventListener()和removeEventListener()。所有DOM節點中都包含這兩個方法，並且它們都接受3個引數：事件名、函式、冒泡或捕獲的布林值（true表示捕獲，false表示冒泡）。      

<span style="font-size:18px;">window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
function init(){
	alert('Lian');
}</span>

        相比較我們自定義的好處有：1不需要自定義了 2 可以遮蔽掉相同的函式 3 可以設定冒泡和捕獲。

        IE事件處理函式

        IE實現了與DOM中類似的兩個方法：attachEvent和detachEvent。這兩個方法接受相同的引數：事件名和函式。

        IE中事件處理函式有很多區別，相對於W3C的DOM而言：1.IE不支援捕獲，只支援冒泡 2.IE新增事件不能遮蔽重複的函式；3.IE中的this指向的是window而不是DOM物件；4.在傳統事件上，IE是無法接受到event物件的，但是使用了attchEvent之後就可以。

        鑑於IE中事件繫結函式有諸多問題，因此在實踐中不去使用。

        事件物件的其他補充

        在W3C中提供了一個屬性：relatedTarget，這個屬性可以在mouseover和mouseout事件中獲取從哪裡移入和從哪裡移出的DOM物件。

        IE提供了兩組分別用於 移入移出的屬性：fromElement和toElement，分別對應mouseover和mouseout。       

<span style="font-size:18px;">function getTarget(evt){
	var e=evt||window.event;
	if(e.srcElement){
		if(e.type=='mouseover'){
			return e.fromElement;
		} else if(e.type=='mouseout'){
			return e.toElement;
		}
	}else if(e.relatedTarget){
		return e.relatedTarget;
	}
}</span>

        小結一下：對於JavaScript的事件學習就暫時告一段落了，用了三篇部落格對事件進行學習和總結，可見這塊的內容是比較重要的，雖然瞭解了大致的內容，但是對一些細節的東西還沒有掌握，期待在以後的專案實踐中加以學習和深化。