js 自定义事件 包含 添加、激活、销毁

1.思路

(1)构思

var eventTarget = {
addEvent: function(){
//添加事件
},
fireEvent: function(){
//触发事件
},
removeEvent: function(){
//移除事件
}
};

(2)建立一一对应的映射表

var eventTarget = {
//保存映射
handlers:{},
addEvent: function(){
//处理代码
},
fireEvent: function(){
//触发代码
},
removeEvent: function(){
//移出代码
}
};

(3)构建映射关系

handlers = {
"type1":[
"fun1",
"fun2",
// "..."
],
"type2":[
"fun1",
"fun2"
// "..."
]
//"..."
}

这样每一个类型可以有多个处理函数,以便于我们以后扩充

(4)构建后

//直接量处理js自定义事件
var eventTarget = {
//保存事件类型,处理函数数组映射
handlers:{},
//注册给定类型的事件处理程序,
//type -> 自定义事件类型, handler -> 自定义事件回调函数
addEvent: function(type, handler){
//判断事件处理数组是否有该类型事件
if(eventTarget.handlers[type] == undefined){
eventTarget.handlers[type] = [];
}
//将处理事件push到事件处理数组里面
eventTarget.handlers[type].push(handler);
},
//触发一个事件
//event -> 为一个js对象,属性中至少包含type属性,
//因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。(这也是为什么要传js对象的原因)
fireEvent: function(event){
//判断是否存在该事件类型
if(eventTarget.handlers[event.type] instanceof Array){
var _handler = eventTarget.handlers[event.type];
//在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
for(var i = 0; i < _handler.length; i++){
//执行触发
_handler[i](event);
}
}
},
//注销事件
//type -> 自定义事件类型, handler -> 自定义事件回调函数
removeEvent: function(type, handler){
if(eventTarget.handlers[type] instanceof Array){
var _handler = eventTarget.handlers[type];
//在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
for(var i = 0; i < _handler.length; i++){
//找出本次需要处理的事件下标
if(_handler[i] == handler){
break;
}
}
//删除处理事件
_handler.splice(i, 1);
}
}
};

这是一种调用运行的方法

eventTarget.addEvent("eat",function(){
console.log(123); //123
});
eventTarget.fireEvent({type: "eat"});

这种方法有一个缺点,不能删除该处理事件,因为我们是用映射表做的,而且也不提倡,直接给映射表里面存这么多数据,有点多。

另一种方法,将处理事件提取出来(推荐)

function b(){
console.log(123);
}
eventTarget.addEvent("eat",b);
eventTarget.fireEvent({
type: "eat"
}); //123
eventTarget.removeEvent("eat",b);
eventTarget.fireEvent({type: "eat"}); //空

也可以这样,传递更多的参数

eventTarget.fireEvent({
type: "eat",
food: "banana"
});
function b(data){
console.log(data.food); //banana
}

(5)总结

//自定义事件构造函数
function EventTarget(){
//事件处理程序数组集合
this.handlers = {};
}
//自定义事件的原型对象
EventTarget.prototype = {
//设置原型构造函数链
constructor: EventTarget,
//注册给定类型的事件处理程序,
//type -> 自定义事件类型, handler -> 自定义事件回调函数
addEvent: function(type, handler){
//判断事件处理数组是否有该类型事件
if(typeof this.handlers[type] == 'undefined'){
this.handlers[type] = [];
}
//将处理事件push到事件处理数组里面
this.handlers[type].push(handler);
},
//触发一个事件
//event -> 为一个js对象,属性中至少包含type属性,
//因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。(这也是为什么要传js对象的原因)
fireEvent: function(event){
//模拟真实事件的event
if(!event.target){
event.target = this;
}
//判断是否存在该事件类型
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
//在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
for(var i = 0; i < handlers.length; i++){
//执行触发
handlers[i](event);
}
}
},
//注销事件
//type -> 自定义事件类型, handler -> 自定义事件回调函数
removeEvent: function(type, handler){
//判断是否存在该事件类型
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
//在同一个事件类型下的可能存在多种处理事件
for(var i = 0; i < handlers.length; i++){
//找出本次需要处理的事件下标
if(handlers[i] == handler){
break;
}
}
//从事件处理数组里面删除
handlers.splice(i, 1);
}
}
}; // 调用方法 function b(){
console.log(123);
} var target = new EventTarget();
target.addEvent("eat", b); target.fireEvent({
type: "eat"
}); //123

.

上一篇:typeof引发的思考


下一篇:STAR法则