javascript 自定義事件初探
更新時(shí)間:2009年08月21日 01:33:59 作者:
"事件機(jī)制可以使程序邏輯更加符合現(xiàn)實(shí)世界,在JavaScript 中很多對(duì)象都有自己的事件,例如按鈕就有onclick 事件,下拉列表框就有onchange 事件,通過這些事件可以方便編程。
還有,“通過事件機(jī)制,可以將類設(shè)計(jì)為獨(dú)立的模塊,通過事件對(duì)外通信,提高了程序的開發(fā)效率?!?。相信C#程序員對(duì)事件的好處是深有體會(huì)的。好了,Code is cheap.看代碼:
function class1() { // 最簡(jiǎn)單的事件設(shè)計(jì)模式
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
obj.show();
}
下面看看如何給事件處理程序傳遞參數(shù):
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function test() {
var obj = new class1();
var userName = " test " ;
obj.onShow = createFunction( null , " objOnShow " , userName);
obj.show();
}
"因?yàn)槭录C(jī)制僅傳遞一個(gè)函數(shù)的名稱,不帶有任何參數(shù)的信息,所以無法傳遞參數(shù)進(jìn)去",這是后話了,“要解決這個(gè)問題,可以從相反的思路去考慮,不考慮怎么把參數(shù)傳進(jìn)去,而是考慮如何構(gòu)建一個(gè)無需參數(shù)的事件處理程序,該程序是根據(jù)有參數(shù)的事件處理程序創(chuàng)建的,是一個(gè)外層的封裝?!?,這里的“該程序”就是 createFunction函數(shù),它巧妙地利用apply函數(shù)將帶參數(shù)的函數(shù)封裝為無參數(shù)函數(shù)。最后我們看看如何實(shí)現(xiàn)自定義事件的多綁定:
// 使自定義事件支持多綁定
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
}
我們看到,attachOnShow方法實(shí)現(xiàn)的基本思想是對(duì)數(shù)組的push操作,其實(shí)我們還可以在事件執(zhí)行完成之后,移除事件處理函數(shù),下面單獨(dú)實(shí)現(xiàn):
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) { // 附加事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
},
detachOnShow: function (_eHandler) { // 移除事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.pop(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
obj.detachOnShow(createFunction( null , " objOnShow " , userName));
obj.show(); // 移除一個(gè),顯示剩余的一個(gè)
obj.detachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show(); // 兩個(gè)都移除,一個(gè)也不顯示
}
關(guān)于自定義事件的學(xué)習(xí)先到這里。
function class1() { // 最簡(jiǎn)單的事件設(shè)計(jì)模式
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
obj.show();
}
下面看看如何給事件處理程序傳遞參數(shù):
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function test() {
var obj = new class1();
var userName = " test " ;
obj.onShow = createFunction( null , " objOnShow " , userName);
obj.show();
}
"因?yàn)槭录C(jī)制僅傳遞一個(gè)函數(shù)的名稱,不帶有任何參數(shù)的信息,所以無法傳遞參數(shù)進(jìn)去",這是后話了,“要解決這個(gè)問題,可以從相反的思路去考慮,不考慮怎么把參數(shù)傳進(jìn)去,而是考慮如何構(gòu)建一個(gè)無需參數(shù)的事件處理程序,該程序是根據(jù)有參數(shù)的事件處理程序創(chuàng)建的,是一個(gè)外層的封裝?!?,這里的“該程序”就是 createFunction函數(shù),它巧妙地利用apply函數(shù)將帶參數(shù)的函數(shù)封裝為無參數(shù)函數(shù)。最后我們看看如何實(shí)現(xiàn)自定義事件的多綁定:
// 使自定義事件支持多綁定
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
}
我們看到,attachOnShow方法實(shí)現(xiàn)的基本思想是對(duì)數(shù)組的push操作,其實(shí)我們還可以在事件執(zhí)行完成之后,移除事件處理函數(shù),下面單獨(dú)實(shí)現(xiàn):
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) { // 附加事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
},
detachOnShow: function (_eHandler) { // 移除事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.pop(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
obj.detachOnShow(createFunction( null , " objOnShow " , userName));
obj.show(); // 移除一個(gè),顯示剩余的一個(gè)
obj.detachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show(); // 兩個(gè)都移除,一個(gè)也不顯示
}
關(guān)于自定義事件的學(xué)習(xí)先到這里。
相關(guān)文章
JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法,實(shí)例分析了javascript操作頁面滾動(dòng)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript學(xué)習(xí)教程之cookie與webstorage
這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06詳解如何構(gòu)建Promise隊(duì)列實(shí)現(xiàn)異步函數(shù)順序執(zhí)行
這篇文章主要介紹了詳解如何構(gòu)建Promise隊(duì)列實(shí)現(xiàn)異步函數(shù)順序執(zhí)行,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06移動(dòng)端刮刮樂的實(shí)現(xiàn)方式(js+HTML5)
本篇文章主要介紹了移動(dòng)端刮刮樂的實(shí)現(xiàn)方法以及實(shí)現(xiàn)代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕實(shí)例代碼
本篇文章主要介紹了原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03javascript 隱藏/顯示指定的區(qū)域附HTML元素【legend】用法
今日閑來無事就寫寫JS,用來顯示/隱藏制定的DIV區(qū)域。2010-03-03