JavaScript觸發器詳解

2024-09-06 12:43:03

字體：大中小

來源：轉載

供稿：網友

一個網站的前端由三個層構成。由XHTML構建的結構層，它包括結構化和有語義的標簽，以及網站的內容。可以在這一層之上增加一個表現層（CSS）和一個行為層（JavaScript），它們使網站看起來更漂亮，對用戶更友好。這三層之間應該保持嚴格的分離。打個比方來說，應該具有這樣的可能性：可以重寫整個表現層而完全不需要觸動到結構層和行為層。
　　除了這種嚴格的分離，表現層和行為層都需要得到來自結構層的指令。它們必須知道在哪里應用樣式，在什么時候初始化行為——換句話說：它們需要觸發器。

　　CSS的觸發器大家都很了解。class和id屬性使你可以完全地控制網站的表現。然而，通過使用內聯的樣式屬性（譯者注：指寫在XHTML標簽中的style="..."屬性），你也可以在不使用這些觸發器的情況下工作，但這種用法是應該被強烈反對的。當你想要重新定義網站表現的時候，就會被迫連XHTML結構層也一起改掉。它們的出現破壞了表現和結構之間的分離。

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

　　最簡單的JavaScript觸發器是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;
　　這樣一來，這段腳本就由是否出現id="navigation"來觸發了。如果沒有id="navigation"，那么什么也不會發生（if (!x) return)；如果它出現了，那么所有被它包圍的鏈接元素（指a標簽）都會得到一個mouseover行為。這種解決方案簡潔、優雅，在所有的瀏覽器中都能工作。如果這種方法已經能夠滿足你的需求，那么你就不需要再讀下去了：）

高級觸發器
　　不幸的是有些情況下你不能使用id作為觸發器：

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

上一篇：HTML在線編輯器的基本概念與相關資料第1/2頁

下一篇：鼠標經過時鏈接文字的特別震撼的顯示效果