Dojo 事件( Events ) - NodeList events 和 Object Methods

本篇介紹除了 DOM 事件以外的事件註冊以及呼叫方法 - NodeList events 和 Object Methods。
由於本篇的事件使用方式與 DOM 事件相似，如果不清楚 DOM 事件的用法，請先閱讀Dojo 事件( Events ) - DOM Events

NodeList events
NodeList 節點所組成的陣列，若不了解請先參考這篇。

dojo.NodeList 可以註冊事件到多個節點上，同樣是使用 connect 方法。這個方法遵照 dojo.connect 的模式，但是不需要指定第一個變數，因為 dojo.NodeList 中的節點就是我們要註冊事件的物件了。範例如下：

<button id="button1" class="clickMe">Click me</button>
<button id="button2" class="clickMeAlso">Click me also</button>
<button id="button3" class="clickMe">Click me too</button>
<button id="button4" class="clickMeAlso">Please click me</button>
<script>
var myObject = {
    id: "myObject",
    onClick: function(evt){
        alert("The scope of this handler is " + this.id);
    }
};
dojo.query(".clickMe").connect("onclick", myObject.onClick);
dojo.query(".clickMeAlso").connect("onclick", myObject, "onClick");
</script>

如果是一般的事件(*註)名稱，我們也可以把它當作 NodeList 方法來使用： .onclick(handler) 或 .onclick(scope, handler or method name)。 不過用這種方法來註冊 event handler 有一個缺點，那就是無法停止註冊( disconnect ) handler。 dojo.NodeList.connect 會傳回 dojo.NodeList 而不是可用在dojo.disconnect 的 handles。所以如果我們不確定是否會需要 disconnect hsndler，使用 connect 即可。

Object Methods 物件方法
對物件而言，方法( method )就像是事件( event )。我們直接看例子，頁面中有一個按鈕，而 JavaScript 中有一個物件來代表這個按鈕：

<button id="myButton">My button</button>
<button id="myButton2">My button</button>
<script>
    var myButtonObject = {
        onClick: function(evt){
            alert("The button was clicked");
        }
    };
    dojo.connect(dojo.byId("myButton"), "onclick", myButtonObject, "onClick");
</script>

接下來，我們希望按下按鈕的時候會出現提示視窗。我們在這裡不另外加 event handler 給這個按鈕的 DOM 節點，而把動作連結到 myButtonObject 的 onClick 函式:

dojo.connect(myButtonObject, "onClick", function(evt){
    alert("The button was clicked and 'onClick' was called");
});

這邊一定要注意，我們之前有提過，dojo.connect 的對象是 DOM node 的時候，事件名稱會做一般化；但是上面這行程式中的第二的變數 "onClick" ，由於對象是物件而不是 DOM node， Dojo 不會將其一般化，所以大小寫必須完全跟物件定義的方法名稱相同。

還有，所有傳進原來方法的變數，也會傳進 handler 中：

var myButtonObject2 = {
    onClickHandler: function(evt){
        this.onClick(evt, "another argument");
    },
    onClick: function(){}
};
dojo.connect(dojo.byId("myButton2"), "onclick",
    myButtonObject2, "onClickHandler");
dojo.connect(myButtonObject2, "onClick", function(evt, another){
    alert("The button was clicked, we were given a second argument: " + another);
});

因為 DOM node 的 event handlers 只被賦予一個變數，所以以 dojo.connect 註冊的 event handler 被呼叫時也只會有一個變數；然而以物件註冊的 event handler 因為原本定義時可以有數個變數傳入，所以被呼叫時也會包含相同數量的變數。

接下來我們利用效果( effect )來看物件方法的事件應用：

<button id="fadeButton">Fade block out</button>
<div id="fadeTarget" class="red-block"></div>
<script>
    var fadeButton = dojo.byId("fadeButton"),
        fadeTarget = dojo.byId("fadeTarget");
 
    dojo.connect(fadeButton, "onclick", function(evt){
        var anim = dojo.fadeOut({ node: fadeTarget });
 
        dojo.connect(anim, "onEnd", function(){
            alert("The fade has finished");
        });
 
        anim.play();
    });
</script>

dojo.fadeOut 會傳回一個物件和一個 onEnd method ，這個 method 會在效果結束的時候執行。利用我們剛所學到的，我們連結物件的 onEnd method 讓動畫結束的時候跳出一個提示視窗。在這個範例的情況下，當紅色區塊消失之後，跳出提示視窗。關於 effect 的用法，之後會再詳細說明。

-------------------------------
註:
onclick - the user clicked a node
onfocus - a node received focus
onblur - a node was 'blurred', or otherwise lost focus
onchange - an input value was changed
onkeypress -
onkeydown - fired when the user presses a key
onkeyup - fired when the user releases a key
onmouseover - a node was hovered (warning: may fire more than you'd like because of bubbling)
onmouseout - a node was un-hovered
onmouseenter - a normalized version of onmouseover that wont fire more than you'd like (only on first enter)
onmouseleave - a normalized version of onmouseout that wont fire more than you'd like (only once when leaving)
onsubmit (v1.2+)
onload (v1.2+)
onerror (v1.2+)