DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS 控件事件小結
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 事件冒泡的支持,而我們在控件上實現的事件冒泡機制足夠我們實現委托的效果,所以委托的接口我們就不實現了。


事件代碼實現

具體的代碼實現和一些幫助方法我寫到下面的代碼中,不便於在文章中展開,感興趣的可以看一下,後面的控件庫都是基於這些幫助方法和事件對象的。文件裡面的其他幫助方法,在其他章節講解。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved