javascript中自定义事件
程序员文章站
2022-03-19 14:06:55
...
自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用。
function EventTarget(){ this.handlers={}; } EventTarget.prototype={ constructor:EventTarget, addHandler:function(type,handler){ if(typeof this.handlers[type]=='undefined'){ this.handlers[type]=new Array(); } this.handlers[type].push(handler); }, removeHandler:function(type,handler){ if(this.handlers[type] instanceof Array){ var handlers=this.handlers[type]; for(var i=0,len=handlers.length;i<len;i++){ if(handler[i]==handler){ handlers.splice(i,1); break; } } } }, trigger:function(event){ if(!event.target){ event.target=this; } if(this.handlers[event.type] instanceof Array){ var handlers=this.handlers[event.type]; for(var i=0,len=handlers.length;i<len;i++){ handlers[i](event); } } } }
addHandler方法用于添加事件处理程序,removeHandler方法用于移除事件处理程序,所有的事件处理程序在属性handlers中统一存储管理。调用trigger方法触发一个事件,该方法接收一个至少包含type属性的对象作为参数,触发的时候会查找handlers属性中对应type的事件处理程序。写段代码测试一下。
function onClose(event){ alert('message:'+event.message); } var target=new EventTarget(); target.addHandler('close',onClose); //浏览器不能帮我们创建事件对象了,自己创建一个,自定义事件对象的属性 var event={ type:'close', message:'Page Cover closed!' }; target.trigger(event);