JavaScript學習11：事件入門

         JavaScript事件是由訪問Web頁面的使用者引起的一系列操作，例如：使用者點選滑鼠，敲擊鍵盤了等等。當使用者執行類似操作的時候，再去觸發執行一系列程式碼作為使用者操作的響應，這就是所謂的事件了吧。

         事件一般是用於瀏覽器和使用者操作進行互動，通常我們將JavaScript中的事件模型分為三種：內聯模型、指令碼模型和DOM2模型。

         內聯模型

是最傳統的接單的一種處理事件的方法。在這個模型中，事件處理函式是HTML標籤的一個屬性，用於處理指定事件。雖然內聯在早期使用較多，但是它是和html混寫的，並沒有與html分離。下面看一個內聯模型的示例：

<span style="font-size:18px;"><inputtype="button" value="按鈕"onclick="alert('Lianjiangwei');" /></span>

         指令碼模型

         由於內聯模型違反了HTML與JavaScript程式碼層次分離的原則，為了解決這個問題，我們嘗試在JavaScript中進行事件處理，這樣就產生了指令碼模型。示例如下：     

<span style="font-size:18px;">  var input=document.getElementsByTagName('input')[0];  //得到input物件
  input.onclick=function(){                             //匿名函式執行
         alert('lianjianwei');
  };</span>

         DOM2模型

         在所有的現代瀏覽器當中——除了IE9之前的版本，都實現了DOM2標準事件模型，這個事件模型規定：每一個DOM元素所觸發的事件都要經歷三個階段：一、捕獲階段；二、目標物件本身的事件處理程式呼叫階段；三、冒泡階段。

         冒泡階段：當文件元素上發生某個型別的事件時，他們會在文件樹上向上傳播，即呼叫父元素的相同型別的事件處理函式。

         捕獲階段：捕獲階段好像是反向的冒泡階段。最先呼叫window物件的捕獲處理程式，然後是document物件的捕獲處理程式，接著是body物件的，再然後是Dom樹向下，以此類推，直到呼叫事件目標元素的父元素的捕獲事件處理程式。在目標元素物件本身上註冊捕獲事件處理程式不會被呼叫。

         事件處理函式

         JavaScript可以處理的事件型別為：滑鼠事件、鍵盤事件、HTML事件。

         對於每一個事件而言，它都有自己的觸發範圍和方式，如果超出了觸發範圍和方式，事件處理將失效。

         對於滑鼠事件而言，頁面所有的元素都可觸發

         鍵盤事件則是當使用者按下鍵盤上按鍵時會觸發，分為keydown、keypress和keyup。

         而HTML事件則是當頁面或者頁面上的標籤元素髮生變化時，觸發相應的事件，比如：load事件，當頁面完全載入後在window上觸發或者當框架集載入完畢後在框架集上觸發。類似的還有unload、select、change等等。

         看幾個簡單的程式碼示例如下：

<span style="font-size:18px;">//事件處理函式舉例
//1 滑鼠事件
input.onmousedown=function(){
         alert('你按下滑鼠沒放！');
}
//2 鍵盤事件
onkeydown=function(){
         alert('你動鍵盤了！');
}
//3 HTML事件
window,onscroll=function(){
         alert('你正在動滾動條！');
}</span>

         小結一下：HTML是Web頁面的靜態描述，而JavaScript是為Web頁面增添動態效果，如何讓這兩者進行互動，那就是我們正在看的事件了，當然這些都是事件的基礎性概念，關於事件物件和事件繫結的東西，我們下回分解。