自定义事件在很多地方都会用到,然后跟着书实例了几次,然后详细注释,也算给自己做了一个笔记。
1 //定义一个自定义事件类 2 //定义一个实例属性用以单独为每一个实例创建独立的事件集 3 function EventTarget() { 4 5 this.handles = {}; 6 7 }; 8 9 EventTarget.prototype = { 10 11 //构造函数的指针指向事件本身 12 constructor: EventTarget, 13 14 15 //添加事件代码的函数,接受两个参数,一个为事件的类型一个为事件的处理程序 16 addHandle: function(type, handle) { 17 18 19 //检测添加的事件类型是否存在 20 if(typeof this.handles[type] == 'undefined'){ 21 22 23 //如果不存在则新创建一个,类型为数组,如果存在则push进数组 24 this.handles[type] = []; 25 }; 26 27 28 this.handles[type].push(handle); 29 30 }, 31 32 //事件触发函数,接受一个对象,对象至少包括一个type属性 33 fire: function(event) { 34 35 36 //检测传入进来的对象target属性是否存在,如果没有则设置一个指向当前实例的指针 37 if(!event.target) { 38 event.target = this; 39 }; 40 41 //检测传入的对象里面事件类型是否存在 42 if(this.handles[event.type] instanceof Array) { 43 44 45 //如果存在则把此事件集赋值给handles变量 46 var handles = this.handles[event.type]; 47 48 49 //循环检测事件集中的事件处理程序,并且执行每一个事件处理程序 50 var i; 51 for(i= 0, len = handles.length; i<len; i++) { 52 53 54 //执行事件处理程序,并且传入event对象 55 handles[i](event); 56 57 }; 58 59 } 60 61 }, 62 63 64 //删除事件程序,接受两个参数,一个为事件类型,一个为事件处理程序 65 removeHandles: function(type,handle) { 66 67 68 //检测事件类型是否存在 69 if(this.handles[type] instanceof Array) { 70 71 72 //把此事件的引用赋值给handles变量 73 var handles = this.handles[type]; 74 75 76 //循环此事件类型集 77 var i; 78 for(i= 0, len = handles.length; i < len; i++) { 79 80 81 //检查此事件集中每一个事件处理程序是否和传入进来的handle绝对等于。 82 if(handles[i] === handle) { 83 84 85 //如果等于跳出当前循环,不等于继续循环 86 break; 87 88 }; 89 90 }; 91 92 93 //通过数组的splice方法,把获取到的事件位置i值,已经数值1传入进splice方法删除事件处理程序。 94 handles.splice(i,1); 95 }; 96 }; 97 }; 98
本文首发于:Javascript自定义事件-伍仪洲的博客
《Javascript自定义事件》留言数:0