JavaScript Event學(xué)習(xí)第一章：Event介紹

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

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

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

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

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

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

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

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

瀏覽器的兼容性問(wèn)題

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

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

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

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

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

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

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

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

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

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

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

寫(xiě)事件處理程序的代碼
那么怎樣寫(xiě)事件處理程序的代碼呢？為了希望快速得到答案和打算以后再學(xué)習(xí)理論的童鞋，在這一章我會(huì)做一個(gè)簡(jiǎn)單的概述。

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

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

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

訪問(wèn)這個(gè)事件
但你注冊(cè)了你的事件處理程序你就開(kāi)始寫(xiě)真正的代碼了。通常你想訪問(wèn)這個(gè)事件本身，所以你可以讀取這個(gè)事件的信息。

訪問(wèn)這個(gè)事件所以你可以讀出他的屬性，通常你的事件處理程序開(kāi)始如下：

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

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

訪問(wèn)這個(gè)HTML元素
有時(shí)候你希望能夠訪問(wèn)到發(fā)生事件的元素。這里有兩個(gè)辦法：使用this關(guān)鍵字或者使用target/srcElement屬性。
比較保險(xiǎn)的訪問(wèn)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屬性包含一個(gè)最初事件發(fā)生的HTML元素的引用。非常有用，但是當(dāng)事件被捕獲或者冒泡了他依然是那個(gè)最初發(fā)生事件的元素不會(huì)改變。

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

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ě)代碼
現(xiàn)在你可以開(kāi)始寫(xiě)事件處理程序的代碼了。通過(guò)前面的代碼和信息，可以讓你知道事件什么時(shí)候發(fā)生，你的代碼應(yīng)該做怎樣的回應(yīng)。記�。鹤尳换ジ�有邏輯性要么你的用戶不會(huì)理解發(fā)生了什么。