Dojo 事件( Events ) - DOM Events

事件( event )連結可以讓我們的應用程式回應使用者的動作，我們將使用者個某個動作和網站應用程式對應的回應連結起來，形成一個事件，之後每當使用者執行那個動作，就會得到我們所設定的回應。除了 DOM 事件之外，我們也可以把呼叫函式( function ) 想成是一個事件："在某個情況發生時，執行某個動作"。這個事件連結的動作，由 dojo.connect 來達成。

DOM Events
DOM 有提供註冊( register )事件處理程序( event handler )的機制，但是，並非所有的瀏覽器都遵守 DOM 規格：根據不同的瀏覽器，有三種方法( addEventListener, attachEvent, and DOM0 )來註冊事件處理程序，再加上有兩種不同的事件物件實作( implementation )。聽起來有很多問題，還好 Dojo 都處理好了：他解決了 DOM APIs 的差異，並整合成一種 API，也就是 dojo.connect。範例開始前我們先建立以下 HTML 架構。

<button id="myButton">Click me!</button>
<div id="myDiv">Hover over me!</div>

接下來，我們想要完成三種效果
1. 按了按鈕之後 div 背景色變成藍色
2. 游標移到 div 上，div 變成紅色
3. 游標移開， div 變回白色

var myButton = dojo.byId("myButton"),
    myDiv = dojo.byId("myDiv");
 
dojo.connect(myButton, "onclick", function(evt){
    dojo.style(myDiv, "backgroundColor", "blue");
});
dojo.connect(myDiv, "onmouseenter", function(evt){
    dojo.style(myDiv, "backgroundColor", "red");
});
dojo.connect(myDiv, "onmouseleave", function(evt){
    dojo.style(myDiv, "backgroundColor", "");
});

這個範例展示了普遍的模式( pattern ): dojo.connect(element, event name, handler)，適用於所有
- window,
- document,
- node,
- form,
- mouse,
- keyboard 事件。
要注意的是，事件名稱的字母全部都是小寫，雖然不是必要的( 因為 Dojo 會自動根據瀏覽器轉換為正確的大小寫 )，但最好保持這個良好習慣，以免自己被混淆。

Dojo 不只一般化註冊事件的 API ，也一般化了呼叫事件處理程序( event handler )的方式：

• Event handler 會依照被註冊的順序被呼叫
• Event handler 在被呼叫時，一訂有一個事件物件( event object )作為最第一個參數
• 而這個 event object 會有一個 .target 屬性, 一個 stopPropagation 方法( method ), 和一個preventDefault 方法

就像 DOM API 一樣， Dojo 提供了一個方法來停止註冊( unregister )或稱為中斷連結( disconnect )一個 event handler： dojo.disconnect。dojo.connect 的回傳值可以傳遞給 dojo.disconnect 來停止執行 event handler。舉例來說，如果我們想要一個只執行一次的事件，可以這樣做：

var handle = dojo.connect(myButton, "onclick", function(evt){
    // 使用 Disconnect 停止註冊這個事件
    dojo.disconnect(handle);
 
    // 將只要執行一次的動作放在這裡
    alert("This alert will only happen one time.");
});

最後一件需要注意的事是： dojo.connect 有一個放在 handler 變數前面的選擇性的變數，這個變數代表，在什麼範圍( scope )之下執行 handler。如果沒有設定這個參數的話， event handler 就會在傳進第一個變數的節點中執行( 或者某些瀏覽器會在 window object 執行)。這個變數在執行物件的方法時有很大的幫助：

var myScopedButton1 = dojo.byId("myScopedButton1"),
    myScopedButton2 = dojo.byId("myScopedButton2"),
    myObject = {
        id: "myObject",
        onClick: function(evt){
            alert("The scope of this handler is " + this.id);
        }
    };
 
// 這裡會 alert 出 "myScopedButton1"
dojo.connect(myScopedButton1, "onclick", myObject.onClick);
// 這裡會 alert 出 "myObject" 而不是 "myScopedButton2"
dojo.connect(myScopedButton2, "onclick", myObject, "onClick");

當 scope 物件被傳入的時候， handler 變數可以是 scope 物件的方法名稱的字串，或者是實際的 function 物件。上面範例的最後一行，也可以寫為

dojo.connect(myDiv, "onclick", myObject, myObject.onClick);

如果 handler 變數是字串(也就是 scope 物件的方法名稱)，那大小寫必須跟物件的方法名稱完全一樣，不然會出現錯誤。

相關文章---------------

Dojo DOM Functions - dojo.query

Dojo DOM Functions -(下)

Dojo DOM Functions -(上)

Dojo Modules 模組化管理

Dojo Toolkit 1.6 - Hello Dojo! Hello World

Dojo Toolkit 1.6 First Peep