jquery 实现原理 六：event

一，基本原理

1.1 数据缓存 data

在事件之前是应该先讲解下data的实现的，因为在event的实现中，需要用到data，用来存储用户在element上注册的事件回调函数，这个data的实现比较简单，所以在这里简单说一下。

$.data可以在一个元素上存储数据，比如$('xxx').data("a", 1)。实现原理很简单，先初始化一个cache对象，然后在元素上添加一个唯一的id属性，这个id对应一个object，然后把这个对应关系存储在cache中。
这样调用data的时候，就可以根据元素上的唯一id去cache中取出一个对象，然后在这个对象上做增删查改的操作即可。
需要注意的一点是，Data函数是在闭包中的，无法直接访问，而jquery帮我们初始化了两个data，分别是data_priv和data_user，即一个是私有的，一个是给用户用的。所以jquery很多模块内部实现会用到data来存储数据，但是你调用data却无法读取到，就是这个原因，jquery内部用的是data_priv来存储的，而用户调用的时候用的是data_user来存储的。

1.2 event的基本实现

还记得dom事件模型吗，0级事件模型和2级事件模型。因为浏览器的实现问题，ie下的二级事件模型只有冒泡而没有捕获过程。而且ie的添加事件的方法名和事件的event对象都和其他浏览器不一样。所以jquery对这个做了一个封装。

event的基本原理也很简单。jquery会调用data方法在element上存储一个events对象和一个handle函数（不要再问我为什么你用data读出来是undefined，参见1.1中的解释data_priv和data_user的解释）。然后把所有的回调函数都存在这个events对象里，events对象的结构如下：
{
     click: queue
     dbclick:queue
     change:queue
     keyup:queue
     …
}
其中handle是一个jquery构造的回调函数，这个函数才是原生事件触发时直接调用的函数，这个函数定义如下：
eventHandle = elemData.handle = function( e ) {
                    // Discard the second event of a jQuery.event.trigger() and
                    // when an event is called after a page has unloaded
                    return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
                         jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                         undefined;
               };
     
其作用就是调用再次调用用户注册的回调函数。
然后就是每个事件名称都对应一个队列，当你调用jqueryapi注册事件时，你的回调函数会被放到对应的队列中，比如click就会放在click队列中。

举个例子总结下。假设执行代码 $("a").click(b);其中b是一个函数，那么jquery的执行过程是：
1，调用data_priv读取handle函数和events对象
2，存储b到events.click队列中
3，调用原生api把handle注册为回调函数
然后触发事件的时候会通过handle函数来调用b，说白了handle就是一个代理而已。

二，源码结构

2.1 helper 对象 jQuery.event

jQuery.event 是一个helper对象，它是事件机制的真正实现，其他的api比如 on， click什么的都是对他的封装而已。基本结构如下：
jQuery.event = {
     add: function(){}
     remove: function(){}
     trigger: function(){}
     dispatch: function(){}
     handlers: function(){}
     fix: function(){}
     special: function(){}
}
说说每个函数的作用：
add 
在一个元素上注册一个事件，其实现过程在上面已经说过了，具体实现细节就不谈了。
remove
删除一个事件
trigger：触发事件，这里是触发浏览器原生的事件，注意其中有这么一行代码：elem[ type ]();
dispatch：事件分发，注意和trigger的区别，trigger是触发原生事件，而dispatch只是调用jquery注册的事件。如果你调用trigger，其会触发原生事件，然后原生事件会触发handle函数，handle函数会调用dispatch来调用你之前用jquery注册的其他回调函数。
handlers：返回用户注册的回调函数队列
fix：修正event参数
special：处理一些特殊的事件，比如onload focus等等

2.2 jQuery.Event

这是回调函数中的event参数，这里做了标准化的处理，因此所有的浏览器中的event参数都会保持一致的api

2.3 封装api

因为有了 event和Event，下面就是封装了各种接口，最终都是调用event中的对应方法来实现的，后面依次定义了这些接口：on, one, off, trigger。

2.4 别名：

在event.alias中定义了一堆别名，本质只是一个快捷方式而已，比如click其实就是on("click")，hover就是mouseenter和mouseleave