标签：代码   enter   nload   card   封装   就会   function   做了   过程   

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来存储的。

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就是一个代理而已。

jquery实现原理 ：event

标签：代码   enter   nload   card   封装   就会   function   做了   过程   

原文地址：http://www.cnblogs.com/miaomiaowuwu/p/6182895.html