javascript 傳統(tǒng)事件模型構(gòu)造的事件監(jiān)聽(tīng)器實(shí)現(xiàn)代碼
更新時(shí)間：2010年05月31日 20:06:25 作者：
最近做東西需要添加大量的事件，而且要對(duì)所有事件進(jìn)行比較細(xì)致的控制，于是便試著寫(xiě)了個(gè)事件監(jiān)聽(tīng)器。
代碼如下：
var br={};
br.eventRouter = {};
br.eventRouter.addListen = function(el,eventType,func){
if(!el.eventObjs){
el.eventObjs = {};
}
if(!el.eventObjs[eventType]){
el.eventObjs[eventType]=[];
br.eventRouter.bindListen(el,eventType);
}
el.eventObjs[eventType].push(func);
};
br.eventRouter.removeListen = function(el,eventType,func){
if(el.eventObjs && el.eventObjs[eventType]){
for(var i=0,len=el.eventObjs[eventType].length;i<len;i++){
var item = el.eventObjs[eventType][i];
if(func==item){
el.eventObjs[eventType].splice(i,1);
return true;
}
}
}
return false;
};
br.eventRouter.bindListen = function(el,eventType){
if(el.eventObjs && el.eventObjs[eventType]){
el[eventType] = function(e){
for(var i=0,len=el.eventObjs[eventType].length;i<len;i++){
var f = el.eventObjs[eventType][i];
f.call(el,e);
}
};
}
};
代碼比較簡(jiǎn)單，不做過(guò)多解釋。也希望有興趣的同學(xué)給出bug。
復(fù)制代碼 代碼如下:
var br={};
br.eventRouter = {};
br.eventRouter.addListen = function(el,eventType,func){
if(!el.eventObjs){
el.eventObjs = {};
}
if(!el.eventObjs[eventType]){
el.eventObjs[eventType]=[];
br.eventRouter.bindListen(el,eventType);
}
el.eventObjs[eventType].push(func);
};
br.eventRouter.removeListen = function(el,eventType,func){
if(el.eventObjs && el.eventObjs[eventType]){
for(var i=0,len=el.eventObjs[eventType].length;i<len;i++){
var item = el.eventObjs[eventType][i];
if(func==item){
el.eventObjs[eventType].splice(i,1);
return true;
}
}
}
return false;
};
br.eventRouter.bindListen = function(el,eventType){
if(el.eventObjs && el.eventObjs[eventType]){
el[eventType] = function(e){
for(var i=0,len=el.eventObjs[eventType].length;i<len;i++){
var f = el.eventObjs[eventType][i];
f.call(el,e);
}
};
}
};
代碼比較簡(jiǎn)單，不做過(guò)多解釋。也希望有興趣的同學(xué)給出bug。
相關(guān)文章
javascript實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)加載進(jìn)度loading
本篇文章主要介紹了javascript實(shí)現(xiàn)一個(gè)頁(yè)面加載進(jìn)度loading的具體步驟以及示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JavaScript中函數(shù)表達(dá)式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達(dá)式的不同
這篇文章主要介紹了JavaScript中函數(shù)表達(dá)式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達(dá)式的不同的相關(guān)資料,需要的朋友可以參考下2015-11-11
在JavaScript中,幾乎每一個(gè)值都是某種特定類(lèi)型的對(duì)象,于是ES6也著重提升了對(duì)象的功能性,下面這篇文章主要給大家介紹了關(guān)于es6新增對(duì)象實(shí)用方法的相關(guān)資料,需要的朋友可以參考下2022-05-05
JavaScript實(shí)現(xiàn)梯形乘法表的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)梯形乘法表的方法,涉及基本javascript結(jié)合表格操作的技巧,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序請(qǐng)求前置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序上傳圖片實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
JavaScript閉包函數(shù)訪(fǎng)問(wèn)外部變量的方法
這篇文章主要介紹了JavaScript閉包函數(shù)訪(fǎng)問(wèn)外部變量的方法,本文使用匿名函數(shù)來(lái)實(shí)現(xiàn)在閉包中訪(fǎng)問(wèn)外部變量,需要的朋友可以參考下2014-08-08
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記二：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了js制作輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這里給大家整理的是本人上個(gè)項(xiàng)目中所用到的js方法，都是些非常常用的javascript方法，相信小伙伴們也能經(jīng)常用到，這里整理出來(lái)分享給大家。2015-01-01