JavaScript Event學習第一章：Event介紹

Events是每一個JavaScript程序核心。什么是事件處理，它有什么問題和怎樣寫出跨瀏覽器的代碼，我將在這一章做一個概述。我也會提供一些有精彩的關(guān)于事件處理程序的細節(jié)的文章。
沒有event就沒有腳本。可以看看任何有JavaScript代碼的網(wǎng)頁：幾乎所有的例子都有一個事件觸發(fā)了腳本。原因非常簡單。JavaScript就是給你的頁面添加內(nèi)部活動：用戶做一些事情然后頁面做出回應。
因此JavaScript就需要一個方法能夠檢測到用戶的動作然后才能知道什么時候做出反應。這還需要知道那個函數(shù)會被執(zhí)行，函數(shù)會做一些你認為的給你的網(wǎng)頁增色的動作。這些文字描述了如何去寫這樣的腳本。雖然不容易，但是這是一個很讓人滿足的工作。
當用戶做了什么事情event就發(fā)生了，當然還有一些event不會直接被用戶觸發(fā)：比如load事件會在頁面裝載完畢的時候觸發(fā)。

JavaScript能夠檢測一些event。從Netscape 2開始，在HTML元素上添加event hanlder就成為可能。這些事件處理函數(shù)等待一個確定的事件，比如點擊一個鏈接。當他發(fā)生的時候，事件就會通過你指定的JavaScript代碼來執(zhí)行。

當用戶做出動作他就引發(fā)了一個事件。當你的代碼讓頁面對這個動作做出回應，交互就產(chǎn)生了。

事件處理程序的歷史
如上所述，沒有事件處理程序就沒有在頁面添加JavaScript的必要。那些能對用戶動作做出反應的就是最好的腳本。因此，當Netscape發(fā)布他的第二版支持JavaScript的瀏覽器的時候，他同時也支持event。

Netscape模式
Netscape只支持一小部分事件。Mouseover和mouseout的快速流行時因為當鼠標滑入時改變圖片而滑出時又返回到原來的狀態(tài)這個很炫的效果。而且可以看到用戶是否提交了表單或者重置了表單，這樣在客戶端的驗證也就成為了可能。瀏覽器還能監(jiān)測表單的某一項獲得或者失去了焦點或者頁面完成下載又或者開始關(guān)閉。在如今看來這些都是非常稀松平常的事情，但在那個時候那可是革命性的。因為你能對用戶的動作做出反饋，所以真正的交互才變成可能。
在最古老的表單的事件處理程序看起來是這樣的。當用戶點擊了鏈接，事件處理程序就被執(zhí)行了然后彈出對話框。

<a href="somewhere.html" onclick="alert('I\'ve been clicked!')">

 注意到這種最古老的處理事件的方法事實上就是Netscape的標準是很重要的。如果想要JavaScript工作，其他的瀏覽器包括IE都得遵從Netscape 2和3的處理事件的標準。因此這些最古老的事件和事件處理程序在任何JavaScript瀏覽器中都能很好的運行。

現(xiàn)在的事件模式
然而，相比之前的介紹，現(xiàn)在的事件處理程序有了很大的變化。第一就是數(shù)量上急劇增長。對HTML元素的事件處理程序的注冊的方法也有很大的變化�，F(xiàn)在完全可由JavaScript設置。不再需要大量的附著于代碼之上，你可以寫一些很簡單的代碼來設置所有的事件處理程序。
V4瀏覽器也提供了關(guān)于事件的很多信息。鼠標在哪？什么時候事件發(fā)生？鍵盤按下了么？最終，瀏覽器必須要對一個元素和這個元素的父元素對同一個動作都有事件處理程序做出選擇。哪個事件先觸發(fā)呢？
因為這個功能而更加加劇了瀏覽器之間的戰(zhàn)火，Netscape和微軟制訂了幾乎互不兼容的兩套事件模型。最近第三種模型開始顯現(xiàn)，這是由w3c發(fā)布的DOM Event specification 。雖然有一個嚴重的缺陷，w3c模型是基于舊的Netscape模型但是更加的廣義和通用，這是一份非常杰出的作品，添加了很多有趣的函數(shù)，也解決了一些老的事件模型存在的問題。
既然存在三種模型，所以事件處理程序也就不能以同樣的方式在所有的瀏覽器里面運行。

瀏覽器的兼容性問題

我們繼續(xù)。就像DHTML，w3c DOM或者其他高級的腳本技術(shù)一樣，我們對于代買的每一個字節(jié)都要小心。在IE中使用stopPropagation()或者在Netscape中使用srcElement都會導致嚴重的錯誤而使我們的代碼毫無用處。因此在使用方法或者屬性之前我們必須對瀏覽器的支持性做必要的檢查。
一個簡單的代碼片段如下：

if (Netscape) {
use Netscape model
}
else if (Explorer) {
use Microsoft model
}

 這只是解決問題的一個開始而已。最近的瀏覽器能運行的事件處理程序的數(shù)量是巨大的，除非你的代碼不允許除了Netscape或者IE其他少數(shù)瀏覽器運行。
所有的小眾瀏覽器都必須不那么光彩的決定支持那種事件模型。Konqueror/Safari通常都選擇嚴格的按照W3C的標準執(zhí)行。Opera和iCab通常都會支持大部分的老的Netscape模型和一些微軟的模型。我對其他的更小眾的瀏覽器還沒有做研究。
但是其他的更小眾的瀏覽器可能選擇支持微軟處理事件的方法，同時又有W3C和老的Netscape的屬性。這都沒什么問題，總之他們都是以他們自己的方法支持我們知道的模型。你的代碼應該沒有問題。

不要使用瀏覽器類型檢測
首先，永遠永遠都不要使用瀏覽器檢測，這是通向地獄的捷徑。任何代碼如果使用navigator.userAgent來做事件模型的檢測，那簡直比沒用還沒用應該直接拉出去彈JJ。
第二，不要被DHTML的object detection的事件對象檢測所迷惑。當你寫DHTML的時候通常檢測DOM的支持性，比如，if(document.all)。如果支持，那么代碼如果使用Microsot的all容器就能搞很好的運行。
但是DHTML和事件處理程序有不同的瀏覽器兼容性模式。比如，Opera 6支持W3C DOM的一部分但是不支持W3C event模型。因此DHTML對象檢測在Opera下會做出錯誤的決定。所以代碼使用if(document.layers)或者其他的事件模型檢測都是不正確的。

正確的問題
那么我們怎么辦？Event屬性的名字造成了這些問題。如果我們針對具體的對象探測使用不同的辦法，基本上能解決99%的瀏覽器的不兼容問題。只有鼠標位置非常的麻煩，其他的都比較簡單了。
另外，最好根本就不要去想那三個事件模型。實際上，我們應該去理解四種事件注冊模型，兩種事件執(zhí)行模型和兩種事件順序。 這里可以快速查看下事件兼容性列表。

現(xiàn)在聽起來好像非常的復雜，實際上并不是這樣。當我們注意到這個的時候也就應該開始真正的理解事件處理程序了。這都是關(guān)于如何提出正確的問題的。不要問“我該怎么寫事件處理程序的代碼呢？”即使這是一個正確的問題，但是難以回答--那需要11頁長的文章才能說清楚。因此你應該問那些有具體答案的具體問題：

 “這里都有什么事件？”
“我怎么對一個HTML元素注冊事件處理程序呢?”
“我怎么阻止默認動作的發(fā)生呢？”
“當我想要得到更多的信息的時候我怎么訪問一個事件呢？”
“當我成功的觸發(fā)了事件，我怎么讀取他的屬性呢？”

“如果一個元素和他的父元素對一個事件都有事件處理程序，那么誰先執(zhí)行呢？”

 上面所有的問題都會在單獨的章節(jié)進行詳細的解答。
寫跨瀏覽器的事件處理程序的的技巧在于不要用整體的事件模型而是分別的回答每一個問題。你會發(fā)現(xiàn)，你只有在需要讀出事件屬性的時候才需要考慮瀏覽器的兼容性問題。

先選擇一個事件注冊模型，然后確定這個事件會在所有的瀏覽器里面觸發(fā)，然后讀出正確的屬性，最后解決事件觸發(fā)順序問題-如果有的話。這樣你就能分貝的解決瀏覽器兼容性問題也能確保你的代碼能在所有的瀏覽器里良好的運行。

繼續(xù)
如果你想按照順序?qū)W習事件，你應該開始讀下一章了。

寫事件處理程序的代碼
那么怎樣寫事件處理程序的代碼呢？為了希望快速得到答案和打算以后再學習理論的童鞋，在這一章我會做一個簡單的概述。

注冊一個事件處理程序
第一步是先注冊你的事件處理程序。你需要確定的是瀏覽器會在任何時候都執(zhí)行你的代碼。
這里有四種注冊事件處理程序的方法：inline,traditional,w3c和Microsoft。
最好使用traditinal方法，因為他能很好的跨瀏覽器并且有很大的自由和通用性。注冊一個事件處理程序，如下：

element.onclick = doSomething;
if (element.captureEvents) element.captureEvents(Event.CLICK);

 現(xiàn)在這個函數(shù)doSomething()就注冊成為一個HTML的element元素click事件的事件處理程序。這意味著無論什么時候用戶點擊了這個元素，那么doSomething()都會執(zhí)行。

訪問這個事件
但你注冊了你的事件處理程序你就開始寫真正的代碼了。通常你想訪問這個事件本身，所以你可以讀取這個事件的信息。

訪問這個事件所以你可以讀出他的屬性，通常你的事件處理程序開始如下：

function doSomething(e) {
if (!e) var e = window.event
// e refers to the event
}

 
現(xiàn)在e就表示在所有瀏覽器里面的事件，你也可以訪問這個事件。

訪問這個HTML元素
有時候你希望能夠訪問到發(fā)生事件的元素。這里有兩個辦法：使用this關(guān)鍵字或者使用target/srcElement屬性。
比較保險的訪問HTML元素的方法是使用this關(guān)鍵字。this并不總是指向正確的HTML元素，但是和traditional模式一起就能很好的工作。

代碼
function doSomething(e) {
if (!e) var e = window.event
// e refers to the event
// this refers to the HTML element which currently handles the event
// target/srcElement refer to the HTML element the event originally took place on
}

 
target/srcElement屬性包含一個最初事件發(fā)生的HTML元素的引用。非常有用，但是當事件被捕獲或者冒泡了他依然是那個最初發(fā)生事件的元素不會改變。

讀取屬性
在讀出一些有趣的事件屬性(event properties)這個問題上，是瀏覽器兼容最不好的部分。學習這個兼容性列表,然后寫出你自己的代碼來獲取你需要的信息。
確定總是使用最仔細的對象檢查。首先確定每一個屬性是否存在，然后再讀取他的值。比如：

function doSomething(e) {
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
}
現(xiàn)在code就包括了所按下的鍵，并且兼容所有的瀏覽器。

事件順序
最后，你需要決定你是否希望事件冒泡。如果不希望發(fā)生事件冒泡，那么就阻止他：

function doSomething(e) {
if (!e) var e = window.event
// handle event
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

 寫代碼
現(xiàn)在你可以開始寫事件處理程序的代碼了。通過前面的代碼和信息，可以讓你知道事件什么時候發(fā)生，你的代碼應該做怎樣的回應。記�。鹤尳换ジ�有邏輯性要么你的用戶不會理解發(fā)生了什么。