世間萬(wàn)物,千變?nèi)f化,面向?qū)ο蟮木幊桃嗍菍?duì)現(xiàn)實(shí)社會(huì)的模擬,而JavaScript是一種基于對(duì)象并且很接近面向?qū)ο缶幊痰木幊陶Z(yǔ)言,而我們web設(shè)計(jì)師/程序員跟JavaScript打交道亦要直面JavaScript才能夠把網(wǎng)頁(yè)寫(xiě)得更加豐富多彩.在此先搞清楚一點(diǎn)就是:JavaScript并不僅僅用在Web上,它可以用在許多領(lǐng)域,當(dāng)然我這里討論的更多的是JavaScript在Web上的應(yīng)用,并且主要是事件方面的應(yīng)用.

JavaScript并不能直接對(duì)Web對(duì)象進(jìn)行操作,而是要通過(guò)瀏覽器提供的Document Object Modle(即常聽(tīng)說(shuō)的DOM,文檔模型對(duì)象)來(lái)操作對(duì)象.HTML是一個(gè)樹(shù)文檔,它以HTML標(biāo)簽為根,其它的元素都是在HTML標(biāo)簽之內(nèi),一級(jí)一級(jí)地延伸下去.而DOM中,則以window為根對(duì)象,其它的對(duì)象則為它的子對(duì)象或者它的子對(duì)象的子對(duì)象.

首先來(lái)認(rèn)識(shí)一下什么叫事件，請(qǐng)看下邊的代碼：

很簡(jiǎn)單的一個(gè)實(shí)例,頁(yè)面只有一個(gè)按鈕,它的value值為"這是一個(gè)按鈕",并且我們給它指定了onclick屬性,它的值為一行JavaScript代碼,使用了window對(duì)象的alert方法,將this.value的內(nèi)容顯示在警告窗體中.這里的this是啥呢?this就是當(dāng)前操作的對(duì)象,即該input對(duì)象.這份代碼告訴瀏覽器:"當(dāng)前對(duì)象受點(diǎn)擊"的時(shí)候要調(diào)用window.alert(this.value)這行代碼,因此瀏覽器在按鈕受點(diǎn)擊的時(shí)候就執(zhí)行了相關(guān)的操作.一個(gè)對(duì)象可以有許多事件,比如說(shuō)單擊(click),雙擊(dbclick),鼠標(biāo)移到上邊(mouseover),鼠標(biāo)移開(kāi)(mouseout)等等,這些事件經(jīng)常在各種流傳的代碼中可以看到.那如何給一個(gè)對(duì)象設(shè)置事件發(fā)生時(shí)執(zhí)行的代碼呢?一般來(lái)說(shuō)有以下三種方式:

第一種:直接設(shè)置HTML元素的事件屬性,名稱一般是on+事件名稱,比如說(shuō)單擊事件即為onclick,實(shí)例請(qǐng)見(jiàn)上邊的代碼

第二種:在script中對(duì)HTML對(duì)象設(shè)置事件屬性,名稱一般也是on+事件名稱,比如說(shuō)obj.onclick = 函數(shù),請(qǐng)見(jiàn)實(shí)例代碼:

或者：

這第二種方式有兩種方法來(lái)指定執(zhí)行的代碼,但本質(zhì)上是一樣的,同樣是指定一個(gè)函數(shù)給對(duì)象,要求對(duì)象當(dāng)某事件發(fā)生的時(shí)候執(zhí)行該函數(shù).
第三種方式: 使用obj.attachEvent(IE瀏覽器)/obj.addEventListener方法來(lái)指定,建議使用此方法:

為什么建議第三種方式呢?上邊所列的第一種方式很明顯只是設(shè)置一下元素屬性,只可能指定一次,而第二種方式與第三種方式的差別可以從下邊的實(shí)例中看出來(lái):

上邊的示例使用了兩個(gè)按鈕，并且使用了第二種方式與第三種方式先后指定了兩個(gè)函數(shù)給click事件，點(diǎn)擊第一個(gè)按鈕可以看到彈出了"指定的第二個(gè)函數(shù)"，說(shuō)明只有MyButton_Onclick1_2函數(shù)生效，而先前指定的MyButton_Onclick1_1被MyButton_Onclick1_2代替了。點(diǎn)擊第二個(gè)按鈕可以看到彈出了兩個(gè)窗體，顯示的內(nèi)容分別是"指定的第一個(gè)函數(shù)"和"指定的第二個(gè)函數(shù)"，很明顯，使用attachEvent/addEventListener可以即增加要執(zhí)行的程序并且還能夠保留原有的程序，在IE中，它們是根據(jù)增加的順序倒序執(zhí)行，即先執(zhí)行后添加的MyButton_Onclick2_2，然后再執(zhí)行MyButton_Onclick2_1，而Firefox中則是相反，先執(zhí)行MyButton_Onclick2_1然后再執(zhí)行MyButton_Onclick2_2。。沒(méi)辦法，IE和Firefox是冤家，對(duì)著干。。呵呵

好了，俺還有項(xiàng)目要趕，只好先寫(xiě)到這里，最近比較忙，呵呵。下篇文章計(jì)劃將利用本文的內(nèi)容寫(xiě)一點(diǎn)應(yīng)用，內(nèi)容為：使用DHTML將span元素模擬成A元素，它亦是本文的后續(xù)文章，但不僅僅是關(guān)于事件了，還會(huì)配合CSS。

PS: 以上內(nèi)容皆為本人所知，如有不當(dāng)之處歡迎指正，不用給俺面子，文章內(nèi)容嚴(yán)謹(jǐn)才不會(huì)誤導(dǎo)讀者嘛。。同時(shí)也呼吁有能力的網(wǎng)友也加入到原創(chuàng)計(jì)劃中來(lái)。感謝此文的讀者以及支持無(wú)憂腳本原創(chuàng)計(jì)劃的網(wǎng)友。
再補(bǔ)充一個(gè) IE 專有的事件驅(qū)動(dòng)方法 Named Script
　　雖然不太建議這么寫(xiě)，不過(guò)做為一個(gè)介紹還是有必要的，如果在只考慮 IE 用戶的情況下，此方法還是有一定的便利性的。
Named Script　通過(guò) <script> 標(biāo)簽來(lái)定義對(duì)象事件。
語(yǔ)法：
<SCRIPT
    CLASS=classname
    DEFER
    EVENT=eventname
    FOR=element
    ID=value
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS | XML
    SRC=url
    TITLE=text
    TYPE=MIME-type
>

　　其它屬性與我們通常使用的 <script> 標(biāo)簽無(wú)異，就不過(guò)多介紹了，主要說(shuō)的是 event 和 for 這兩個(gè)屬性。event 屬性表示了腳本在什么事件觸發(fā)執(zhí)行，for 屬性表示事件觸發(fā)的對(duì)象，就以紅亭的例子讓我們來(lái)看試一下：

大家應(yīng)該看到了，效果和其它的方法是一樣的，也許有人會(huì)說(shuō)既然一樣而且兼容性又不好，為什么還要這么用呢？請(qǐng)看下面的例子：

這個(gè)例子有多個(gè)相同的 name 的對(duì)象，（注意：是 name 而不是 id，在 DOM 標(biāo)準(zhǔn)中 id 應(yīng)該是唯一的，雖然在 IE 中可以有多個(gè)相同 id 的對(duì)象，不過(guò)不建議大家這么做。）只用一句 Named Script 就可以對(duì)這些對(duì)象完成事件驅(qū)動(dòng)，從代碼上來(lái)說(shuō)簡(jiǎn)便了不少，及至以后的修改也變的非常方便，這也是 Named Script 的最大優(yōu)點(diǎn)。

　　應(yīng)用最多的地方會(huì)在表單的 Radio 或者 Checkbox 對(duì)象上，因?yàn)樗鼈円话愣紩?huì)有相同的 name，而同時(shí)也會(huì)有相同的事件驅(qū)動(dòng)，具體的應(yīng)用范圍很廣，可以在無(wú)憂腳本 http://www.51j.com/ 里搜索到大量的應(yīng)用實(shí)例，在此僅做一些簡(jiǎn)單的介紹，就不過(guò)多的舉例了?！　?STRONG>最后再次重申一下，此方法僅為 IE 特有，其它其它瀏覽器不支持。
判斷window.document.all是否為null是判斷當(dāng)前瀏覽器是IE還是Firefox最簡(jiǎn)單的方法，因?yàn)镮E有這個(gè)對(duì)象，而firefox沒(méi)有。

最新評(píng)論