标签：
今天闲的蛋疼，我们来聊一聊web前端中的事件机制和自定义事件。灵感来自jQuery，在此感谢jQuery作者。
首先，最开始。
<button id="button" type="button" onclick="alert(‘hello‘)">你好</button>
这是我们在使用html写页面的时候最原生的事件触发方式。上面那行代码会生成一个按钮，当我们点击这个按钮的时候就会弹出一个原生的弹窗，内容是hello。
随着技术的发展，我们认为事件要和html结构分开，于是就演化出了这么一种写法。
<button id="button" type="button">你好</button>
<script>
var button = document.getElementById("button");
button.onclick = function(){
alert("hello");
}
</script>
以上代码的效果和第一个一样，但是实现了事件与html的分离。
和上面的代码采用一样的原理，可以为各种各样元素添加各种各样事件。比如说keyup、mouseover等。
那我们对js最原生的事件有了一定的了解后，我们就会想，我们能不能自定义事件呢？比如说，我们希望在按一个按钮的时候触发一个save事件。我们发现原生的js中没有save事件，怎么办，难道就这么放弃吗？
于是我们就考虑了，事件的本质在于消息的传递。那我们把save写成一个函数，当我们点击按钮的时候执行该函数，不就变相的实现了这个自定义事件吗？
<button id="button" type="button">你好</button>
<script>
var button = document.getElementById("button");
button.onclick = function(){
save();
}
var save = function(){
alert("save");
}
</script>
是啊，实现是实现了，但我们就觉得这个方法好挫啊，而且我们如果想要为save定义多个事件，就会发现，后一个事件会覆盖前一个事件这就相当的蛋疼了。
那我们可不可以这样，将save事件弄成一个函数数组，在触发的时候顺序触发这个数组中的每一个函数，这样我们不就可以触发多个方法了？然后我们如果需要为该事件添加新的方法，只要在这个数组中添加新的项就可以啦。
<button id="button" type="button">你好</button>
<script>
var button = document.getElementById("button");
button.onclick = function(){
trigger(save);
}
var trigger = function(){
for(var i in save){
save[i]();
}
}
var save1 = function(){
alert("save1");
}
var save2 = function(){
alert("save2");
}
var save = [save1,save2];
</script>
以上的代码会顺序弹出save1和save2。使用同样的方法我们可以为原生的事件添加多个函数方法。（是不是有点类似于addEventListener和attachEvent？）
看着上面的代码还是有点不爽，为什么呢？因为没有上面提到的那两个方法帅呀。哈哈。
我们的方法优势在于可以添加自定义事件，而原生的方法不但执行效率比我们高，使用也比咱们便利，感觉好不爽。
我们重新设计一下，刚才说原生的方法比咱们便利，那我们就进行统一化尽力提高便利性。我们刚才的分析中提到了，原生的事件和自定义的事件都可以通过以上的方法来玩。那我们就不要管是原生的还是自定义的了。
事件可能有哪几种操作，我这里只想到了，添加、移除、触发以及挂靠到原生事件上。那我们可以定义addEvent()添加事件、removeEvent()移除事件、trigger()触发事件、dispatchEvent()挂靠事件。
这里就不提供源代码了，如果有兴趣可以去查看jQuery源码，推荐看低版本，比如说1.0.4那里的事件机制是最原始的，也是最易懂的。
addEvent()
1、需要检测事件数组是否存在，如果不存在定义一个数组，这个数组用于存放事件的所有方法，执行2。否则执行3
2、将挂载在元素上的事件方法添加到该数组中。执行3
3、将函数参数中传入的事件方法添加到事件数组中。执行4
4、将函数数组挂载带元素上。
removeEvent()
1、通过传入参数找到事件数组中想要移除的事件方法。执行2
2、移除对应事件方法。
trigger()
1、依次执行事件数组中的每一个函数方法即可。
dispatchEvent()
1、将事件数组的触发函数挂载到元素的执行函数上。只要完成下面代码的效果即可。
<button id="button" type="button">你好</button>
<script>
var button = document.getElementById("button");
var handler = function(type){
//这是事件数组触发函数
}
button.onclick = handler(click);
</script>
写了这么多，还是感觉好不爽怎么办，为什么呢？我要是一次性触发了好多好多事件，那我们就不好理解这些事件的执行顺序了。
于是，我们可以设置一个全局的事件队列，触发函数触发事件的时候，不直接执行函数方法，而是在事件队列中添加一个信号。而全局的事件队列定时的检测是否有新的事件产生（比如100毫秒检测一次，实际上不会带来多大的系统开销。）如果有新的事件产生，就执行对应的函数方法。这样的好处在于有利于用户控制每个事件的执行顺序（只要调整事件队列中的顺序即可），从而达到很多意想不到的效果。
标签：
原文地址：http://www.cnblogs.com/xcmylrl/p/5405797.html
