js自定义事件的实现探索

我们一般所熟悉的事件，都是这样的：onclick,onmouseover,ontouchstart,onfocus...

但这里要讨论自定义事件的实现，包含：事件注册/监听、事件分发。

有两种方式去实现：

1. 自己实现事件管理器：CustomEventManager

2. 使用document.createEvent

先说第一种方式

CustomEventManager的实现

要实现一个完整的事件体系，必须包含2大功能：注册/监听、触发，用伪代码表示：

function CustomEventManager()
{
   
}

CustomEventManager.prototype.listen = function(){}
CustomEventManager.prototype.dispatch = function(){}

使用：

var eventManager = new CustomEventManager();
var div1 = document.getElementById(‘div1‘);
eventManager.listen(div1,‘song‘,function(e,params){e.innerHTML = params.title});
//..省略业务逻辑一万行，再某个条件下，触发song事件
eventManager.dispatch(‘song‘,{title:"我的滑板鞋"})

这段代码的意思是：div1这个dom监听了song事件，当触发song事件的时候，div1中显示"我的滑板鞋"。

有人可能有疑问，为何不直接在dispatch那个地方直接 `div1.innerHTML = "我的滑板鞋"`，这方面可以参考设计模式之观察者模式相关知识。

listen部分的代码其实应该是下面这种形式：

div1.listen(‘song‘,function(e,params){e.innerHTML = params.title})

要实现这样的形式，还得另外处理，而且关于CustomEventManager的实现远不是上面这几行代码可以实现的，可以用别人写好的库，当然也可以使用接下来要说的第二种方法。

使用javascript内置event对象

js其实内置了一套事件实现api，我们知道event对象，那么是不是自定义了event对象也就实现了自定义事件呢？差不多如此吧。先看一段代码：

div1 = document.getElementById(‘div1‘);
var evt = document.createEvent(‘HTMLEvents‘);//创建一个event对象
evt.initEvent(‘song‘);//初始化event对象，事件类型为song
div1.addEventListener(‘song‘,funtion(){alert(‘song‘)})//div1监听song事件
//...省略一万行
div1.dispatchEvent(evt);//在div1对象上触发song事件，如果div1监听了song事件那么就会有相应的处理。

这种有点类似于模仿click等事件的方式，你必须指定在某个元素上触发某个事件对象，系统会检查这个元素有没有监听这个事件(如 onclick="" 这种，代码中通过addEventListener实现)。

这种事件模型有点局限性，能满足简单的场景，它与观察者模式还是不同的，详细的使用方式可以查看手册，从createEvent方法开始了解。

使用event对象的好处我猜测是可以和html标签中的 onXXX 相结合。