JavaScript學習13：事件綁定__Java

        事件綁定分為兩種：一種是傳統事件綁定（內聯模型、指令碼模型），一種是現代事件綁定（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的事件學習就暫時告一段落了，用了三篇部落格對事件進行學習和總結，可見這塊的內容是比較重要的，雖然瞭解了大致的內容，但是對一些細節的東西還沒有掌握，期待在以後的項目實踐中加以學習和深化。