欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

自定义事件的绑定与触发实现

更新时间: 2014-01-05 00:51:03 责任编辑: Author_N1

 

自定义事件的绑定与触发实现!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.8.3.js"></script>
<script>

  var eventWrap={};
	var eventIdKey='eventId'+new Date().getTime();
	var uuid=0;
	function bind($el,eName,func){
		if($el && eName && func){
			var eId=$el.attr(eventIdKey);
			if(!eId){
				eId='eid'+(++uuid);
				$el.attr(eventIdKey,eId);
				eventWrap[eId]={};
			}
			var fArr=eventWrap[eId][eName];
			if(!fArr){
				fArr=eventWrap[eId][eName]=[];
			}
			fArr.push(func);
		}
	}
	function trigger($el,eName){
		if($el && eName){
			var eId=$el.attr(eventIdKey);
			if(eId){
				var fArr=eventWrap[eId][eName];
				if(fArr){					 
					for(var i=0;i<fArr.length;i++){
						if(typeof fArr[i]=='function'){
							fArr[i].call($el);
						}
					}
				}
			}
		}
	}
	
	$(function(){
		//测试
		var $div=$('div.tdiv');
		bind($div,'aaa',function(){alert(111);});
		bind($div,'aaa',function(){alert(222);});
		trigger($div,'aaa');
	});	
	
</script>
</head>
<body>
<div class="tdiv"></div>
</body>
</html>


自定义事件的绑定与触发设计思想:
1)全局事件对象eventWrap,里面包含元素事件id对象,元素事件id对象中包含事件名称及对应的函数队列
2)使用'eventId'+new Date().getTime()作为事件id属性的名称(这样可以尽量避免属性名的冲突,毕竟用这个属性名称的少之又少!),该属性指向eventWrap中的元素事件id,
3)定义一个用来全局递增的uuid,用来生成新的事件id
4)接下来,无非是对全局事件对象eventWrap的维护而已,绑定的时候按名称把函数放进去,调用的时候按名称取出来(当然,此处还可以加上解绑函数unbind)
5)需注意的编码技巧:判断对象或变量是否存在,不存在则创建,高效代码应该如:var eId=$el.attr(eventIdKey);if(!eId){..}、var fArr=eventWrap[eId][eName];if(!fArr){..} 
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:51:03
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/544/
本文WWW.DOC100.NET DOC100.NET版权所有。