自定义事件的绑定与触发实现!
<!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){..}