封裝了一個(gè)支持匿名函數(shù)的Javascript事件監(jiān)聽(tīng)器
更新時(shí)間：2014年06月05日 10:13:38 作者：
這篇文章主要介紹了支持匿名函數(shù)的Javascript事件監(jiān)聽(tīng)封裝,需要的朋友可以參考下
關(guān)于js中的事件監(jiān)聽(tīng)大家用的比較多了，無(wú)非是判斷瀏覽器是否支持addEventListener和attachEvent，網(wǎng)上搜索關(guān)于事件監(jiān)聽(tīng)的方法也挺多，但是總有些不是很完善。下面的方法中對(duì)于添加事件監(jiān)聽(tīng)的方法是一樣的，只不過(guò)在取消事件綁定上面做了點(diǎn)手術(shù)，現(xiàn)在可以支持匿名函數(shù)的使用，所以在綁定事件的時(shí)候不再需要給函數(shù)單獨(dú)命名了。
主要代碼：
復(fù)制代碼 代碼如下:
/*綁定事件與取消綁定*/
var handleHash = {};
var bind = (function() {
if (window.addEventListener) {
return function(el, type, fn, capture) {
el.addEventListener(type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
}, capture);
};
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
});
};
}
})();
var unbind = (function(){
if (window.addEventListener) {
return function(el, type ) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.removeEventListener(type, handleHash[type][i]);
}
};
};
} else if (window.attachEvent) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.detachEvent("on" + type, handleHash[type][i]);
}
};
};
}
})();
原理解析：
handleHash做哈希表緩存事件的function，handleHash['事件名稱']是一個(gè)數(shù)組，來(lái)添加多個(gè)事件監(jiān)聽(tīng)的方法，unbind哪個(gè)事件的時(shí)候遍歷handleHash['事件名稱']的數(shù)組，然后移除。
使用：
復(fù)制代碼 代碼如下:
bind(obj,'click',function(){
alert ('click');
});
unbind(obj,'click');
相關(guān)文章
JS字符串和數(shù)組如何實(shí)現(xiàn)相互轉(zhuǎn)化
這篇文章主要介紹了JS字符串和數(shù)組如何實(shí)現(xiàn)相互轉(zhuǎn)化,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JS圖片延遲加載插件LazyImgv1.0用法分析【附demo源碼下載】
這篇文章主要介紹了JS圖片延遲加載插件LazyImgv1.0用法,結(jié)合實(shí)例形式分析了使用圖片延遲加載插件LazyImgv1.0的注意事項(xiàng)與核心操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Javascript promise異步編程，Promise 是異步編程的一種解決方案，可以替代傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04
由于項(xiàng)目要求，有些文本框需要禁用掉右鍵和復(fù)制粘貼的功能，昨天剛剛用JS實(shí)現(xiàn)。2010-04-04
JS計(jì)算距當(dāng)前時(shí)間的時(shí)間差實(shí)例
下面小編就為大家分享一篇JS計(jì)算距當(dāng)前時(shí)間的時(shí)間差實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
js模擬jquery的slide和fadeIn和fadeOut功能
以前用過(guò)jquery的slideUp，slideDown，等許多很不錯(cuò)的方法，感覺(jué)很容易就能實(shí)現(xiàn)頁(yè)面元素的動(dòng)畫(huà)效果！2010-07-07
這篇文章主要介紹了JS生成隨機(jī)打亂數(shù)組的方法,涉及javascript數(shù)組隨機(jī)排序的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
原生js實(shí)現(xiàn)回復(fù)評(píng)論功能
本文主要分享了原生js實(shí)現(xiàn)回復(fù)評(píng)論功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了詳解JavaScript修改注冊(cè)表的方法,本實(shí)例主要通過(guò)WshShell 對(duì)象的相關(guān)方法實(shí)現(xiàn),需要的朋友可以參考下2020-01-01