Question

如何在JavaScript中使用自定义事件

Answer 1

在javascript中实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:
function EventTarget(){
this.handlers = {};//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组
}

EventTarget.prototype = {
constructor:EventTarget,
//添加事件
addHandler:function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
//触发事件
fire: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++){
//将event传递给事件处理程序,event.target代表对象本身,
event.type代表事件名,你可以根据情况为添加event属性
handlers[i](event);
}
}
},

//移除事件
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(handlers[i] == handler){
break;
}
}
handlers.splice(i,1);
}
}
};

首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,
然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.
addHander是向handlers中添加事件处理程序
fire是触发handlers中的事件处理程序
removeHandler是向handlers中移除事件处理程序
注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.

Answer 2

在javascript中 ，document.createEvent()的函数来专门创建自定义事件。
自定义事件到激发这个事件，需要document.createEvent()，event.initEvent()，element.dispatchEvent()这三步，分别是创建事件对象，初始化事件对象，触发事件。

给你个简单例子：

function foo1(){
console.log("foo1 is execute");
}
function foo2(){
console.log("foo2 is execute");
}
var ev=document.createEvent('HTMLEvents');
ev.initEvent('fakeEvent',false,false);
document.addEventListener("fakeEvent",foo1,false);
document.addEventListener("fakeEvent",foo2,false);