JavaScript學習11：事件入門__Java

         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頁面增添動態效果，如何讓這兩者進行互動，那就是我們正在看的事件了，當然這些都是事件的基礎性概念，關於事件對象和事件綁定的東西，我們下回分解。