JavaScript之事件總結

JavaScript之事件總結

上篇已經介紹了DOM機制，主要是針對web頁面結構及樣式的設計。但是有了良好的介面設計還不夠，還需要實現網頁與使用者的互動。我們的最終目的還是為使用者服務，所以就需要使用者來訪問及操作web頁。這就涉及到另一個概念：事件。

JavaScript事件是由訪問Web頁面的使用者引起的一些列操作，比如使用者點擊。只有使用者執行了某項操作之後才會去執行對應的代碼。這部分的主要內容如下：

在事件模型中，內聯模型是最傳統的處理方法，事件處理函數作為HTML標籤的一個屬性來處理指定的事件，它一般都是與HTML混寫，例如：

 

 

而指令碼模型則可以實現HTML與JavaScript代碼層進行分離，例如：

HTML部分：

 

 

JavaScript部分：

 

        var input=document.getElementsByTagName('input')[0];        input.onclick=function(){           alert('wang');        }

 

雖然指令碼模型實現了HTML與JavaScript的分離，但是隨著我們使用的次數、複雜度的增加，這種模型也存在著許多問題，事件之間的覆蓋問題、可讀性以及this傳遞等問題。

這時就用到了DOM2模型，處理函數中的類型2也主要針對該模型進行使用。無論哪種模型，都需要使用事件處理函數來實現使用者操作與代碼之間的綁定，一般涉及到的事件是滑鼠和鍵盤，使用者通過滑鼠和鍵盤操作類提交自己的需求，而操作的背後就是依據通過事件處理函數所擷取的對象中包含的內容進行處理，得到使用者所需要的內容。

通過這些事件處理，可以實現對使用者操作進行處理，得到使用者所需要的資訊。這部分的實現，才真正實現了與使用者的互動。在這個過程中，我們需要注意的問題主要有：瀏覽器的相容問題，對於不同的瀏覽器及相同瀏覽器的不同版本，我們需要進行相容設定，這也是為什麼處理函數中的類型2分為W3C和IE。

 

總結：

一個能夠得到使用者喜愛的網站，其良好的介面設計與功能是必不可少的，這正是我們一直在接觸的UI設計。所以，雖然事件中更多的是為了實現某個功能，得到使用者所需的資訊，但是也必須考慮周全，儘可能在擷取所需資訊的同時，能夠給使用者一個舒適的體驗度。對這部分的學習還需繼續。。。