JS 控件事件小結(jié)
更新時(shí)間:2012年10月31日 14:57:23 作者:
事件對(duì)于控件來(lái)說(shuō)至關(guān)重要,控件的消息通信機(jī)制使用事件的成本最低,但是對(duì)于JS控件來(lái)說(shuō)有一些麻煩需要解決,JS類本身不支持事件,DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的
概述:
事件對(duì)于控件來(lái)說(shuō)至關(guān)重要,控件的消息通信機(jī)制使用事件的成本最低,但是對(duì)于JS控件來(lái)說(shuō)有一些麻煩需要解決,JS類本身不支持事件,DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的。
事件機(jī)制
對(duì)于事件的機(jī)制我不想多說(shuō),各種語(yǔ)言中對(duì)事件的描述都很具體,都是觀察者模式的一種實(shí)現(xiàn),我們可以從中抽取出事件必須的接口(由于控件庫(kù)是基于jQuery 所以接口跟jquery保持一致):
1.on: 綁定事件
2.off: 刪除事件
3.fire: 觸發(fā)事件
4.addTarget : 添加冒泡的對(duì)象
5.publish: 允許事件冒泡
jQuery 中的事件
jQuery 中的事件功能缺失很豐富,但是必須是jQuery對(duì)象才支持,我們自己定義的控件類無(wú)法直接使用jQuery的事件,事件的上下文也有問(wèn)題,所以我們需要自己封裝控件的事件。
jQuery 中的 Callbacks 是 1.7中添加的用于回調(diào)的機(jī)制,使用起來(lái)很方便,但是問(wèn)題也是指定上下文需要在觸發(fā)時(shí)指定,我們可以將其封裝到我們自己的事件類中。
綁定事件:
函數(shù)原型: function on(eventType,callback) 參數(shù):
1.eventType : 事件類型
2.callback : 回調(diào)函數(shù)
3.scope : 回調(diào)函數(shù)的上下文,這個(gè)變量在真正的控件綁定過(guò)程中使用的非常少,而且都有替代方案,所以為了簡(jiǎn)單起見(jiàn),scope變量在此函數(shù)和下面的所有函數(shù)中就引入了。
上面回調(diào)函數(shù)的上下文是綁定事件的控件本身
刪除綁定:
函數(shù)原型 : function off(eventType,callback) 參數(shù)同上:
1.eventType : 事件類型
2.callback : 回調(diào)函數(shù),此變量省略時(shí),刪除這個(gè)事件類型的所有綁定函數(shù)。
在真正的控件開(kāi)發(fā)和使用過(guò)程中,刪除事件比綁定事件要麻煩的多,刪除事件時(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í)行,也就是說(shuō),如果一個(gè)控件有多個(gè)子控件,那么子控件觸發(fā)點(diǎn)擊事件時(shí)可以冒泡到父類控件,我們只需要監(jiān)聽(tīng)父類的冒泡事件即可
事件冒泡
函數(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āi),感興趣的可以看一下,后面的控件庫(kù)都是基于這些幫助方法和事件對(duì)象的。文件里面的其他幫助方法,在其他章節(jié)講解。
事件對(duì)于控件來(lái)說(shuō)至關(guān)重要,控件的消息通信機(jī)制使用事件的成本最低,但是對(duì)于JS控件來(lái)說(shuō)有一些麻煩需要解決,JS類本身不支持事件,DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的。
事件機(jī)制
對(duì)于事件的機(jī)制我不想多說(shuō),各種語(yǔ)言中對(duì)事件的描述都很具體,都是觀察者模式的一種實(shí)現(xiàn),我們可以從中抽取出事件必須的接口(由于控件庫(kù)是基于jQuery 所以接口跟jquery保持一致):
1.on: 綁定事件
2.off: 刪除事件
3.fire: 觸發(fā)事件
4.addTarget : 添加冒泡的對(duì)象
5.publish: 允許事件冒泡
jQuery 中的事件
jQuery 中的事件功能缺失很豐富,但是必須是jQuery對(duì)象才支持,我們自己定義的控件類無(wú)法直接使用jQuery的事件,事件的上下文也有問(wèn)題,所以我們需要自己封裝控件的事件。
jQuery 中的 Callbacks 是 1.7中添加的用于回調(diào)的機(jī)制,使用起來(lái)很方便,但是問(wèn)題也是指定上下文需要在觸發(fā)時(shí)指定,我們可以將其封裝到我們自己的事件類中。
綁定事件:
函數(shù)原型: function on(eventType,callback) 參數(shù):
1.eventType : 事件類型
2.callback : 回調(diào)函數(shù)
3.scope : 回調(diào)函數(shù)的上下文,這個(gè)變量在真正的控件綁定過(guò)程中使用的非常少,而且都有替代方案,所以為了簡(jiǎn)單起見(jiàn),scope變量在此函數(shù)和下面的所有函數(shù)中就引入了。
上面回調(diào)函數(shù)的上下文是綁定事件的控件本身
刪除綁定:
函數(shù)原型 : function off(eventType,callback) 參數(shù)同上:
1.eventType : 事件類型
2.callback : 回調(diào)函數(shù),此變量省略時(shí),刪除這個(gè)事件類型的所有綁定函數(shù)。
在真正的控件開(kāi)發(fā)和使用過(guò)程中,刪除事件比綁定事件要麻煩的多,刪除事件時(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í)行,也就是說(shuō),如果一個(gè)控件有多個(gè)子控件,那么子控件觸發(fā)點(diǎn)擊事件時(shí)可以冒泡到父類控件,我們只需要監(jiān)聽(tīng)父類的冒泡事件即可
事件冒泡
函數(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āi),感興趣的可以看一下,后面的控件庫(kù)都是基于這些幫助方法和事件對(duì)象的。文件里面的其他幫助方法,在其他章節(jié)講解。
相關(guān)文章
實(shí)例解析ES6 Proxy使用場(chǎng)景介紹
本篇文章主要介紹了ES6 Proxy使用場(chǎng)景介紹,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
javascript基于DOM實(shí)現(xiàn)省市級(jí)聯(lián)下拉框的方法
這篇文章主要介紹了javascript基于DOM實(shí)現(xiàn)省市級(jí)聯(lián)下拉框的方法,可實(shí)現(xiàn)選擇省份后出現(xiàn)對(duì)應(yīng)城市下拉框選項(xiàng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
基于JavaScript的操作系統(tǒng)你聽(tīng)說(shuō)過(guò)嗎?
基于JavaScript的操作系統(tǒng),你聽(tīng)說(shuō)過(guò)嗎?小編也是第一次聽(tīng)說(shuō),接觸,和大家一起了解一下2016-01-01
IE和Firefox在JavaScript應(yīng)用中的兼容性探討
今天在使用CSS屬性的時(shí)候發(fā)現(xiàn)"cursor:hand;"在Firefox中鼠標(biāo)不會(huì)變?yōu)槭中停髞?lái)上網(wǎng)搜索了一下資料,發(fā)現(xiàn)hand這個(gè)cursor屬性在Firrefox中不兼容,使用"cursor:pointer"就都可以顯示了。2008-04-04
Smartour 讓網(wǎng)頁(yè)導(dǎo)覽變得更簡(jiǎn)單(推薦)
這篇文章主要介紹了Smartour 讓網(wǎng)頁(yè)導(dǎo)覽變得更簡(jiǎn)單(推薦),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
解決layui調(diào)用自定義方法提示未定義的問(wèn)題
今天小編就為大家分享一篇解決layui調(diào)用自定義方法提示未定義的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09

