JS 控件事件小結
2024-05-06 14:21:04
供稿：網友
概述：
事件對于控件來說至關重要，控件的消息通信機制使用事件的成本最低，但是對于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 添加事件冒泡到的對象上，控件實現中，默認指定控件的父控件作為其冒泡的對象。
