Ajax實戰：綁定事件處理函數代碼

JavaScript檔案(代碼清單4-3)採用編程方式將事件綁定到鍵上。

代碼清單4-3 musical.js

window.onload調用了assignKeys()函數(可以在這個檔案中直接定義window. onload，但是這限制了它的可移植性)。通過唯一的ID來發現keyboard元素，然 後使用getElementsByTagName()遍曆訪問其內部所有的DIV元素。這需要知道一 些關於頁面結構的知識，但是它允許頁面設計師自由地在頁面中將鍵盤DIV以希 望的方式任意移動。

表示鍵的DOM元素返回一個單獨的字串作為className屬性。我們使用內建 的String. split函數將其轉換為一個數組，並且檢查元素是否是musicalButton 類。之後讀取樣式的另一部分——它代表了鍵所演奏的音符 ——並且作為一個額外的屬性附加在DOM節點上，這個屬性可以被事 件處理函數獲得。

通過Web瀏覽器演奏音樂需要相當高的技巧，在這裡，我們僅僅對鍵盤下的控 制台進行了編程，用innerHTML已經足夠了。圖4-4顯示了活動中的音樂鍵盤。這 裡我們實現了很好的角色分離，假設頁面設計師去掉了頁面上某個地方的鍵盤和 控制台的DIV標籤，只要頁麵包括了樣式表和JavaScript，應用程式仍然可以工 作，偶然打破事件邏輯的風險是很小的。HTML頁面有效地成為了一個模版，我們 向其中注入了變數和邏輯，這提供了一個保持邏輯與視圖相分離的好方法。我們 已經手工完成了這個例子，以此來示範工作機制的細節。在生產環境中，你可能 喜歡使用幾個解決了同樣問題的第三方庫。

圖4-4 運行於瀏覽器中的音樂鍵盤應用。頂部的彩色地區被映射到音符上， 當滑鼠在上面移動時，音符列印在下面的控制台地區

Rico架構(www.openrico.org)有一個Behavior對象的概念，它以DOM樹的特定 部分為目標，為它們添加互動性。3.5.2節曾簡單地考察了Rico Accordion的行 為。

類似的分離HTML標記和互動性的方法可以通過Ben Nolan的Behaviour庫來實 現(參見本章“資源”一節)。這個庫允許基於CSS選取器規則將事件 處理函數代碼分配給DOM元素(見第2章)。在之前的例子中，assignKeys()函數以 keyboard作為id採用編程方式選擇文件項目，然後使用DOM處理方法得到它直接 包含的所有DIV元素。我們可以使用一個CSS選取器來表達：

#keyboard div

使用CSS選取器可以給所有的keyboard元素設定樣式。使用Behaviour.js庫， 也可以用相同的方法應用事件處理函數，如下：

大部分邏輯與前面的例子是一樣的，但是對CSS選取器的使用提供了一種採用 編程方式定位DOM元素的簡明的替代方法，特別是當需要立即添加幾個行為的時 候。

這種方法保持了邏輯與視圖的分離，但是它也可能將視圖和邏輯混在一起， 下面我們將會看到這一點。