js事件模型与自定义事件实例解析
JavaScript一个最简单的事件模型，需要有事件绑定与触发，还有事件删除。
vareventModel={
list:{},
bind:function(){
varargs=[].slice.call(arguments),
type=args[0],
handlers=args.slice(1);
if(typeoftype==='string'&&handlers.length>0){
for(vari=0;i<handlers.length;i++){
if(typeofhandlers[i]==='function'){
if(!this.list[type]){
this.list[type]=[];
}
this.list[type].push(handlers[i]);
}
}
}
},
unbind:function(){
vartype=arguments[0],
handlers=Array.prototype.slice.call(arguments,1);
if(typeoftype==='string'){
if(handlers.length===0){
this.list[type]=[];
}else{
for(vari=0;i<handlers.length;i++){
if(typeofhandlers[i]==='function'&&handlers[i]===this.list[type][i]){
this.list[type].splice(i,1);
}
}
}
}
},
trigger:function(){
vararguments=[].slice.call(arguments),
type=arguments[0],
args=arguments[1]instanceofArray&&!arguments[2]?arguments[1]:arguments.slice(1),
handlers=this.list[type];
for(vari=0;i<handlers.length;i++){
handlers[i].apply(this,args.splice(0,handlers[i].length));
}
}
};
其中主要实现了bind（绑定事件）、unbind（删除事件）与trigger(触发事件)。对同一事件名称，可以绑定多个事件处理函数；并按照绑定的顺序依次触发。
args.splice(0,handlers[i].length)触发时的传参
事件绑定与触发：
eventModel.bind('myevent1',function(a){
console.log(a);//1
},function(b){
console.log(b);//2
},function(c,d){
console.log(c+'+'+d);//a+b
});
eventModel.bind('myevent1',function(e){
console.log(e);//50
});
eventModel.trigger('myevent1',1,2,'a','b',50);
事件删除：
<buttonid="bind">bind</button> <buttonid="unbind">unbind</button>
varfnX=function(){
console.log('fnX');
}
varfnY=function(){
console.log('fnY');
}
eventModel.bind('myevent2',fnX,fnY);
document.getElementById('unbind').onclick=function(){
eventModel.unbind('myevent2',fnX);//删除fnX后，只剩下fnY
};
document.getElementById('bind').onclick=function(){
eventModel.trigger('myevent2');//输出fnXfnY
//在点击unbind后，只输出fnY
};
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！