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

最新推荐文章于 2024-06-17 07:15:00 发布

cound123

最新推荐文章于 2024-06-17 07:15:00 发布

阅读量271

点赞数

文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/cound123/article/details/84513401

版权


<!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){..}