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

2013-12-23

自定义事件的绑定与触发实现！!DOCTYPE htmlhtmlheadmeta http-equivContent-Type contenttext

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

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

热点排行

Web前端

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