JS 控制項事件小結_javascript技巧

概述：

事件對於控制項來說至關重要，控制項的訊息通訊機制使用事件的成本最低，但是對於JS控制項來說有一些麻煩需要解決，JS類本身不支援事件，DOM模型支援的事件僅適應於瀏覽器的DOM節點。所以建立一套事件是我們寫控制項之前要做的。

事件機制

對於事件的機制我不想多說，各種語言中對事件的描述都很具體，都是觀察者模式的一種實現，我們可以從中抽取出事件必須的介面（由於控制項陳列庫是基於jQuery 所以介面跟jquery保持一致）：

1.on: 綁定事件

2.off: 刪除事件

3.fire: 觸發事件

4.addTarget : 添加冒泡的對象

5.publish: 允許事件冒泡

jQuery 中的事件

jQuery 中的事件功能缺失很豐富，但是必須是jQuery對象才支援，我們自己定義的控制項類無法直接使用jQuery的事件，事件的上下文也有問題，所以我們需要自己封裝控制項的事件。

jQuery 中的 Callbacks 是 1.7中添加的用於回調的機制，使用起來很方便，但是問題也是指定上下文需要在觸發時指定，我們可以將其封裝到我們自己的事件類別中。

綁定事件：

函數原型: function on(eventType,callback) 參數：
1.eventType : 事件類型
2.callback ： 回呼函數
3.scope : 回呼函數的上下文，這個變數在真正的控制項綁定過程中使用的非常少，而且都有替代方案，所以為了簡單起見，scope變數在此函數和下面的所有函數中就引入了。

上面回呼函數的上下文是綁定事件的控制項本身

刪除綁定：
函數原型 ： function off(eventType,callback) 參數同上：

1.eventType : 事件類型
2.callback ： 回呼函數，此變數省略時，刪除這個事件類型的所有綁定函數。
在真正的控制項開發和使用過程中，刪除事件比綁定事件要麻煩的多，刪除事件時，你需要有綁定事件時函數的引用，如果需要頻繁刪除添加同一個事件時請考慮使用delegate

觸發事件
函數原型： fire(eventType) :

1. eventType : 事件類型，綁定到對象上的此類型的函數執行。

這裡有2點需要注意：

1.觸發事件的方式，我們這裡使用 ‘stopOnFalse'的方式，也就是綁定在同一個事件類型下的函數順序執行，如果有一個傳回值為false，那麼下面的函數終止執行。其他觸發事件的方式參考 jquery 的 Callbacks 。

2.事件的是否冒泡執行，也就是說，如果一個控制項有多個子控制項，那麼子控制項觸發點擊事件時可以冒泡到父類控制項，我們只需要監聽父類的冒泡事件即可

事件冒泡

函數原型： function(eventType,bubble) ：

1.eventType : 事件類型
2.bubble : 是否冒泡

此函數與 function addTarget(control) 相匹配使用。

addTarget 添加事件冒泡到的對象上，控制項實現中，預設指定控制項的父控制項作為其冒泡的對象。

上面觸發事件中講到的，允許控制項事件冒泡有很多好處：

1. 事件綁定後，子控制項的添加刪除不受影響

2. 事件使用更加方便，不需要去瞭解控制項的內部

跟事件冒泡對應的是委託(delegate和 undelegate)，委託依賴於事件冒泡，DOM的事件機制和jQuery都支援委託，這是因為瀏覽器本身對DOM 事件冒泡的支援，而我們在控制項上實現的事件冒泡機制足夠我們實現委託的效果，所以委託的介面我們就不實現了。


事件代碼實現

具體的代碼實現和一些協助方法我寫到下面的代碼中，不便於在文章中展開，感興趣的可以看一下，後面的控制項陳列庫都是基於這些協助方法和事件對象的。檔案裡面的其他協助方法，在其他章節講解。