快捷導(dǎo)航

JS 控件事件小結(jié)

更新時(shí)間：2012年10月31日 14:57:23 作者：

事件對(duì)于控件來說至關(guān)重要，控件的消息通信機(jī)制使用事件的成本最低，但是對(duì)于JS控件來說有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的

概述：

事件對(duì)于控件來說至關(guān)重要，控件的消息通信機(jī)制使用事件的成本最低，但是對(duì)于JS控件來說有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的。

事件機(jī)制

對(duì)于事件的機(jī)制我不想多說，各種語言中對(duì)事件的描述都很具體，都是觀察者模式的一種實(shí)現(xiàn)，我們可以從中抽取出事件必須的接口（由于控件庫(kù)是基于jQuery 所以接口跟jquery保持一致）：

1.on: 綁定事件

2.off: 刪除事件

3.fire: 觸發(fā)事件

4.addTarget : 添加冒泡的對(duì)象

5.publish: 允許事件冒泡

jQuery 中的事件

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

jQuery 中的 Callbacks 是 1.7中添加的用于回調(diào)的機(jī)制，使用起來很方便，但是問題也是指定上下文需要在觸發(fā)時(shí)指定，我們可以將其封裝到我們自己的事件類中。

綁定事件：

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

上面回調(diào)函數(shù)的上下文是綁定事件的控件本身

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

1.eventType : 事件類型
2.callback ：回調(diào)函數(shù)，此變量省略時(shí)，刪除這個(gè)事件類型的所有綁定函數(shù)。
在真正的控件開發(fā)和使用過程中，刪除事件比綁定事件要麻煩的多，刪除事件時(shí)，你需要有綁定事件時(shí)函數(shù)的引用，如果需要頻繁刪除添加同一個(gè)事件時(shí)請(qǐng)考慮使用delegate

觸發(fā)事件
函數(shù)原型： fire(eventType) :

1. eventType : 事件類型，綁定到對(duì)象上的此類型的函數(shù)執(zhí)行。

這里有2點(diǎn)需要注意：

1.觸發(fā)事件的方式，我們這里使用 ‘stopOnFalse'的方式，也就是綁定在同一個(gè)事件類型下的函數(shù)順序執(zhí)行，如果有一個(gè)返回值為false，那么下面的函數(shù)終止執(zhí)行。其他觸發(fā)事件的方式參考 jquery 的 Callbacks 。

2.事件的是否冒泡執(zhí)行，也就是說，如果一個(gè)控件有多個(gè)子控件，那么子控件觸發(fā)點(diǎn)擊事件時(shí)可以冒泡到父類控件，我們只需要監(jiān)聽父類的冒泡事件即可

事件冒泡

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

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

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

addTarget 添加事件冒泡到的對(duì)象上，控件實(shí)現(xiàn)中，默認(rèn)指定控件的父控件作為其冒泡的對(duì)象。

上面觸發(fā)事件中講到的，允許控件事件冒泡有很多好處：

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

2. 事件使用更加方便，不需要去了解控件的內(nèi)部

跟事件冒泡對(duì)應(yīng)的是委托(delegate和 undelegate)，委托依賴于事件冒泡，DOM的事件機(jī)制和jQuery都支持委托，這是因?yàn)闉g覽器本身對(duì)DOM 事件冒泡的支持，而我們?cè)诳丶蠈?shí)現(xiàn)的事件冒泡機(jī)制足夠我們實(shí)現(xiàn)委托的效果，所以委托的接口我們就不實(shí)現(xiàn)了。

事件代碼實(shí)現(xiàn)

具體的代碼實(shí)現(xiàn)和一些幫助方法我寫到下面的代碼中，不便于在文章中展開，感興趣的可以看一下，后面的控件庫(kù)都是基于這些幫助方法和事件對(duì)象的。文件里面的其他幫助方法，在其他章節(jié)講解。

您可能感興趣的文章: