JavaScript觸發(fā)器詳解

2024-09-06 12:43:03

字體：大中小

供稿：網(wǎng)友

一個(gè)網(wǎng)站的前端由三個(gè)層構(gòu)成。由XHTML構(gòu)建的結(jié)構(gòu)層，它包括結(jié)構(gòu)化和有語(yǔ)義的標(biāo)簽，以及網(wǎng)站的內(nèi)容。可以在這一層之上增加一個(gè)表現(xiàn)層（CSS）和一個(gè)行為層（JavaScript），它們使網(wǎng)站看起來(lái)更漂亮，對(duì)用戶(hù)更友好。這三層之間應(yīng)該保持嚴(yán)格的分離。打個(gè)比方來(lái)說(shuō)，應(yīng)該具有這樣的可能性：可以重寫(xiě)整個(gè)表現(xiàn)層而完全不需要觸動(dòng)到結(jié)構(gòu)層和行為層。
　　除了這種嚴(yán)格的分離，表現(xiàn)層和行為層都需要得到來(lái)自結(jié)構(gòu)層的指令。它們必須知道在哪里應(yīng)用樣式，在什么時(shí)候初始化行為——換句話(huà)說(shuō)：它們需要觸發(fā)器。

　　CSS的觸發(fā)器大家都很了解。class和id屬性使你可以完全地控制網(wǎng)站的表現(xiàn)。然而，通過(guò)使用內(nèi)聯(lián)的樣式屬性（譯者注：指寫(xiě)在XHTML標(biāo)簽中的style="..."屬性），你也可以在不使用這些觸發(fā)器的情況下工作，但這種用法是應(yīng)該被強(qiáng)烈反對(duì)的。當(dāng)你想要重新定義網(wǎng)站表現(xiàn)的時(shí)候，就會(huì)被迫連XHTML結(jié)構(gòu)層也一起改掉。它們的出現(xiàn)破壞了表現(xiàn)和結(jié)構(gòu)之間的分離。

JavaScript觸發(fā)器
　　行為層也應(yīng)該可以用同樣的方式工作。通過(guò)拋棄使用內(nèi)聯(lián)的事件句柄（比如onmouseover="switchImages('fearful',6,false)"），我們可以把行為和結(jié)構(gòu)分開(kāi)。和CSS一樣，我們應(yīng)該使用觸發(fā)器去告訴腳本在哪里部署行為。

　　最簡(jiǎn)單的JavaScript觸發(fā)器是id屬性。

<div id="navigation"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul></div>var x = document.getElementById('navigation');if (!x) return;var y = x.getElementsByTagName('a');for (var i=0;i<y.length;i++) y[i].onmouseover = addBehavior;
　　這樣一來(lái)，這段腳本就由是否出現(xiàn)id="navigation"來(lái)觸發(fā)了。如果沒(méi)有id="navigation"，那么什么也不會(huì)發(fā)生（if (!x) return)；如果它出現(xiàn)了，那么所有被它包圍的鏈接元素（指a標(biāo)簽）都會(huì)得到一個(gè)mouseover行為。這種解決方案簡(jiǎn)潔、優(yōu)雅，在所有的瀏覽器中都能工作。如果這種方法已經(jīng)能夠滿(mǎn)足你的需求，那么你就不需要再讀下去了：）

高級(jí)觸發(fā)器
　　不幸的是有些情況下你不能使用id作為觸發(fā)器：

一個(gè)id只能在文檔中出現(xiàn)一次，有時(shí)候你可能想把同樣的行為加到幾個(gè)（或一組）元素之上。
有些情況下腳本需要比僅僅指出“在這里部署”更多的信息（譯者注：比如傳遞一些參數(shù)）。
　　我們用表單腳本來(lái)作上面兩個(gè)問(wèn)題的例子。給XHTML加上表單校驗(yàn)觸發(fā)器會(huì)很實(shí)用，比如指定“這個(gè)輸入域（譯者注：文字輸入框、密碼輸入框等）是必填的”。為了實(shí)現(xiàn)這樣的觸發(fā)器，我們很可能得到如下的腳本：

上一篇：HTML在線編輯器的基本概念與相關(guān)資料第1/2頁(yè)

下一篇：鼠標(biāo)經(jīng)過(guò)時(shí)鏈接文字的特別震撼的顯示效果