JS自定义事件
自定义事件，就是自己定义事件类型，自己定义事件处理函数。我们平时操作dom时经常会用到onclick、onmousemove等浏览器特定行为的事件类型。
封装is自定义事件基本的构思：
var eventTarget = {
addEvent: function(){
//添加事件
},
fireEvent: function(){
//触发事件
},
removeEvent: function(){
//移除事件
}
};在js默认事件中事件类型以及对应的执行函数是一一对应的，但是自定义事件，需要一个映射表来建立两者之间的联系。如： 这样每个类型可以处理多个事件函数
handlers = {
"type1":[
"fun1",
"fun2",
// "..."
],
"type2":[
"fun1",
"fun2"
// "..."
]
//"..."
}代码实现：
function EventTarget(){
//事件处理程序数组集合
this.handlers={};
}
//自定义事件的原型对象
EventTarget.prototype={
//设置原型构造函数链
constructor:EventTarget,
//注册给定类型的事件处理程序
//type->自定义事件类型，如click,handler->自定义事件回调函数
addEvent:function(type,handler){
//判断事件处理函数中是否有该类型事件
if(this.handlers[type]==undefined){
this.handlers[type]=[];
}
this.handlers[type].push(handler);
},
//触发事件
//event为一个js对象，属性中至少包含type属性。
fireEvent:function(event){
//模拟真实事件的event
if(!event.target){
event.target=this;
}
//判断是否存在该事件类型
if(this.handlers[event.type] instanceof Array){
var items=this.handlers[event.type];
//在同一事件类型下可能存在多个事件处理函数，依次触发
//执行触发
items.forEach(function(item){
item(event);
})
}
},
//删除事件
removeEvent:function(type,handler){
//判断是否存在该事件类型
if(this.handlers[type] instanceof Array){
var items=this.handlers[type];
//在同一事件类型下可能存在多个处理事件
for(var i=0;i<items.length;i++){
if(items[i]==handler){
//从该类型的事件数组中删除该事件
items.splice(i,1);
break;
}
}
}
}
}
//调用方法
function fun(){
console.log(‘执行该方法‘);
}
function fun1(obj){
console.log(‘run ‘+obj.min+‘s‘);
}
var target=new EventTarget();
target.addEvent("run",fun);//添加事件
target.addEvent("run",fun1);//添加事件
target.fireEvent({type:"run",min:"30"});//执行该方法 123
target.removeEvent("run",fun);//移除事件
target.fireEvent({type:"run",min:"20"});//123本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
