js 自定义事件
2018-07-07 本文已影响0人
木木_bfe8
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
</body>
<script type="text/javascript">
//自定义事件构造函数
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属性，{type: "MY",args:"args",handler:"testEvenB",}
//因为类型是必须的，其次可以传一些处理函数需要的其他变量参数。（这也是为什么要传js对象的原因）
fireEvent: function(event){
//模拟真实事件的event
if(!event.target){
event.target = this;
}
//判断是否存在该事件类型
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
//获取当前事件
current_event = handlers.filter(function(item){return item.name==event.handler});
console.log(event.args);
current_event[0]();
}
},
//注销事件
//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);
//如果该类型下处理的事件为空则删除该类型
if(handlers.length===0){
delete this.handlers[type];
}
}
}
};
//test
function testEvenA(){
console.log('hello world MY A');
}
function testEvenB(){
console.log('hello world MY B');
}
var target = new EventTarget();
target.addEvent("MY", testEvenA);
target.addEvent("MY", testEvenB);
target.fireEvent({
type: "MY",
args:"args",
handler:"testEvenB",
});
console.log(target);
target.removeEvent('MY',testEvenA)
console.log(target);
</script>
</html>
