首页 > 代码库 > 彻底弄懂jQuery事件原理二

彻底弄懂jQuery事件原理二

上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类

技术分享\

先放个图,这其实就是整个事件流程的过程:

技术分享

 

1. add方法:

add: function(elem, types, handler, data, selector) {

            var handleObjIn, eventHandle, tmp,
                events, t, handleObj,
                special, handlers, type, namespaces, origType,
                elemData = data_priv.get(elem);

            // Don‘t attach events to noData or text/comment nodes (but allow plain objects)
       //取出dom对象的数据缓存对象,如果为空或是text,comment节点,直接退出,不会绑定事件
if (!elemData) { return; } // Caller can pass in an object of custom data in lieu of the handler if (handler.handler) { handleObjIn = handler; handler = handleObjIn.handler; selector = handleObjIn.selector; } // Make sure that the handler has a unique ID, used to find/remove it later
       //guid是否存在,不存在创建一个,用于标示和删除事件
if (!handler.guid) { handler.guid = jQuery.guid++; } // Init the element‘s event structure and main handler, if this is the first
       //检测数据缓存中是否存在事件队列,没有创建一个,用于保存绑定的事件
if (!(events = elemData.events)) { events = elemData.events = {}; }        //为数据缓存添加一个事件处理器,后面会用到 if (!(eventHandle = elemData.handle)) { 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 !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ? jQuery.event.dispatch.apply(eventHandle.elem, arguments) : undefined; }; // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
         //定义事件处理器对应的元素,用于防止IE非原生事件中的内存泄露
eventHandle.elem = elem; } // Handle multiple events separated by a space // jQuery(...).bind("mouseover mouseout", fn); // core_rnotwhite:/\S+/g
       //多个事件通过空格拆分
types = (types || "").match(core_rnotwhite) || [""]; // 例如:‘.a .b .c‘.match(/\S+/g) → [".a", ".b", ".c"] t = types.length;         
       //对每个事件进行处理
while (t--) { //命名空间处理 如"mouseover.a.b" → tmp = ["mouseover.a.b", "mouseover", "a.b"] tmp = rtypenamespace.exec(types[t]) || []; type = origType = tmp[1]; namespaces = (tmp[2] || "").split(".").sort();//namespace = [‘a‘,‘b‘] // There *must* be a type, no attaching namespace-only handlers
         //如果事件不存在,不处理
if (!type) { continue; } // If event changes its type, use the special event handlers for the changed type
         //兼容性处理,后面再说
special = jQuery.event.special[type] || {}; // If selector defined, determine special event api type, otherwise given type type = (selector ? special.delegateType : special.bindType) || type; // Update special based on newly reset type special = jQuery.event.special[type] || {}; // handleObj is passed to all event handlers
         //创建事件处理对象,这里保存了事件的各种属性,包括事件名称,数据,guid,委托标签(selector),处理函数等等
handleObj = jQuery.extend({ type: type, origType: origType, data: data, handler: handler, guid: handler.guid, selector: selector, needsContext: selector && jQuery.expr.match.needsContext.test(selector), namespace: namespaces.join(".") }, handleObjIn); // Init the event handler queue if we‘re the first
         // 针对当前事件类型,初始化事件处理列队,如果是第一次使用,则执行初始化
if (!(handlers = events[type])) {
                    handlers = events[type] = [];
                    handlers.delegateCount = 0;

                    // Only use addEventListener if the special events handler returns false
           //真正的逻辑在这里,先不考虑兼容性处理,把上面的事件处理器绑定到DOM对象中去,jQuery2.0.3不兼容低版本浏览器,所以addEventListener是通用的
if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) { if (elem.addEventListener) { elem.addEventListener(type, eventHandle, false); } } }          //兼容性处理,先不看 if (special.add) { special.add.call(elem, handleObj); if (!handleObj.handler.guid) { handleObj.handler.guid = handler.guid; } } // Add to the element‘s handler list, delegates in front
         //如果有委托参数,将委托函数插入队列的前排头等舱位置
if (selector) { handlers.splice(handlers.delegateCount++, 0, handleObj); } else {
          //否则追加到队列后面 handlers.push(handleObj); }
// Keep track of which events have ever been used, for event optimization
         //标示当前事件曾经处理过,用于事件优化
jQuery.event.global[type] = true; } // Nullify elem to prevent memory leaks in IE
       // 设置为null避免IE中循环引用导致的内存泄露
elem = null;
        },

整体思路是为当前的dom对象添加两个属性,一个是事件处理队列event_list,一个是事件处理器eventHandler,对用户输入的所有事件进行循环处理,创建事件对象保存到event_list中去,如果事件带有委托对象,则放到前排,否则追加到event_list,再把eventHandler绑定到DOM节点中这个事件中去,最终类似下面的结构:

<div id="#main_div"><span></span></div>
<script>
  function handler1(){};
  function handler2(){}

  $("#main_div").on("click",‘span‘,handler1)
  .on("click",handler2);
</script>
创建为:

elemData =http://www.mamicode.com/ jQuery._data( elem ); elemData =http://www.mamicode.com/ {   events: {     click: {//Array[2]       0: {         data: undefined/{...},         guid: 2, //处理函数的id         handler: function handler1(){…},         namespace: "",         needsContext: false,         origType: "click",         selector: "span",         type: "click"       }       1: {         data: undefined,         guid: 3,         handler: function handler2(){…},         namespace: "",         needsContext: false,         origType: "click",         selector: undefined,         type: "click"       }       delegateCount: 1,//委托事件数量,有selector的才是委托事件       length: 2     }   }   handle: function ( e ) {…}{//click事件会触发这个处理函数     elem: document//属于handle对象的特征   } }

回到上面的eventHandle = elemData.handle,当事件在浏览器触发时,会触发jQuery.event.dispatch.apply(eventHandle.elem, arguments) ,也就是执行dispatch方法:

2. dispatch方法:

      dispatch: function(event) {
            // Make a writable jQuery.Event from the native event object
            // 通过原生的事件对象创建一个可写的jQuery.Event对象
            event = jQuery.event.fix(event);
            var i, j, ret, matched, handleObj,
                handlerQueue = [],
                args = core_slice.call(arguments),
                handlers = (data_priv.get(this, "events") || {})[event.type] || [],
                special = jQuery.event.special[event.type] || {};

            // Use the fix-ed jQuery.Event rather than the (read-only) native event
            args[0] = event;
            // 事件的触发元素
            event.delegateTarget = this;

            // Call the preDispatch hook for the mapped type, and let it bail if desired
            if (special.preDispatch && special.preDispatch.call(this, event) === false) {
                return;
            }

            // Determine handlers
       //handlers就是前面的elementData.event,事件列表
       //调用event.handlers方法过滤当前
handlerQueue = jQuery.event.handlers.call(this, event, handlers); // Run delegates first; they may want to stop propagation beneath us i = 0; // 遍历事件处理器队列{elem, handlerObjs}(取出来则对应一个包了),且事件没有阻止冒泡 while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) { event.currentTarget = matched.elem; j = 0; // 如果事件处理对象{handleObjs}存在(一个元素可能有很多handleObjs),且事件不需要立刻阻止冒泡 while ((handleObj = matched.handlers[j++]) && !event.isImmediatePropagationStopped()) { // Triggered event must either 1) have no namespace, or // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). // Triggered event must either 1) have no namespace, or // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). // 触发的事件必须满足其一: // 1) 没有命名空间 // 2) 有命名空间,且被绑定的事件是命名空间的一个子集 if (!event.namespace_re || event.namespace_re.test(handleObj.namespace)) { event.handleObj = handleObj; event.data = handleObj.data; // 尝试通过特殊事件获取处理函数,否则使用handleObj中保存的handler(所以handleObj中还保存有handler(事件处理函数)) // handleObj.origType 定义的事件类型 // handleObj.handler 事件处理函数 // 终于到这里了,开始执行事件处理函数 ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler) .apply(matched.elem, args); // 检测是否有返回值存在 if (ret !== undefined) { // 如果处理函数返回值是false,则阻止冒泡,阻止默认动作 if ((event.result = ret) === false) { event.preventDefault(); event.stopPropagation(); } } } } } // Call the postDispatch hook for the mapped type if (special.postDispatch) { special.postDispatch.call(this, event); } return event.result; },

整个过程就是:

1. 当浏览器事件触发时,会触发dispatch方法并传入浏览器event对象。

2. jQuery显然不满意原生event对象,通过fix方法重写了event对象,除了继承了event对象,还添加了一些自己的属性,变成了event对象增强版。

3. 取出当前dom对象数据缓存中的Event列表,也就是事件列表。

4. 调用event.handler方法,把事件列表(handlers,也就是elemData.event)传递进去,对事件列表进行遍历查询,把需要执行的事件对象提取出来放到handlerQueue中去。

5. 对handlerQueue进行遍历,当存在handlerQueue对象并且事件没有阻止冒泡,则最终会调用事件对象函数,也就是调用之前绑定的事件对象函数。

 

上面是主要的4个步骤,实际上每个步骤都有很多细节要说:

1. 这个很简单,原生事件到jQuery事件的入口。

2. fix方法,返回了加强版的event对象,主要作用是浏览器兼容性处理,加入了jQuery的自己方法,以及可以创建自定义对象等等。

 (1)首先对象的类型适配,keyEvent和mouseEvent的事件对象属性是不同的,这里通过fixHooks来进行适配,jQuery.event.props包含了事件对象的公用属性

技术分享

然后mouseHooks和keyHooks分别包含了鼠标和键盘事件的不同对象,通过下面的逻辑进行合并,将公有属性和私有属性concat到一起,实现了动态适配。

if (!fixHook) {
        this.fixHooks[type] = fixHook =
        rmouseEvent.test(type) ? this.mouseHooks :
        rkeyEvent.test(type) ? this.keyHooks : {};
}
copy = fixHook.props ? this.props.concat(fixHook.props) : this.props;

然后参加event = new jQuery.Event(originalEvent);创建加强版event,Event对象下面会说,先执行下面逻辑

            i = copy.length;
            while (i--) {//将原生对象的属性值拷贝过来
                prop = copy[i];
                event[prop] = originalEvent[prop];
            }

       //兼容性处理,Cordova不支持target属性,这里添加上
if (!event.target) { event.target = document; }
       // text节点不能是target,查找其父节点
if (event.target.nodeType === 3) { event.target = event.target.parentNode; }        //钩子方法,将keyEvent和mouseEvent的兼容性处理,见相应的filter方法,比如添加which属性,pageX和pageY属性等等。 return fixHook.filter ? fixHook.filter(event, originalEvent) : event;

最后返回一个全新的Event对象,该对象包含了旧对象的所有方法,还新增了兼容性处理的属性(pageX等),兼容了target属性等等。

(2)创建Event对象:Event构造函数的主要作用就是重写事件默认对象方法,兼容时间戳属性this.timeStamp = src && src.timeStamp || jQuery.now();因为部分浏览器这块有差异,这里统一处理。下面是对象方法:

技术分享

重写了preventDefault,stopPropagation,stopImmediatePropagation方法,只是在原有的基础上新增了是否调用过的判断,是否调用过就是增加的isDefaultPrevented,isPropagationStopped和isImmediatePropagationStopped几个方法。、

3. handlers = (data_priv.get(this, "events") || {})[event.type] || [];取出事件列表

4. handlerQueue = jQuery.event.handlers.call(this, event, handlers);调用jQuery.event.handlers方法,这个方法主要做两个逻辑处理

(1)从事件源对象event.target开始,一层一层往父节点遍历,每遍历到一个父节点,再遍历event事件对象列表的前排带有委托标识(selector)的元素,看看当前节点是否能查询到委托元素(selector),如果能查到,说明当前节点是被委托处理事件的节点,也就是说源事件发生以后,当前节点是被委托需要响应事件的,就将该事件函数push到handlerQueue数组中,直到所有遍历完成。

  此时handlerQueue数组保存的是当前节点需要处理的需要委托处理的方法。

(2)再把当前节点绑定的事件函数(也就是非委托直接绑定的事件函数) 添加到handlerQueue中去,此时handlerQueue包含了两种事件函数:

     1) 其他节点委托到本节点的所有函数列表

     2) 直接绑定到本节点的函数列表

到此就返回了当前事件需要响应的所有函数列表。

5. 事件函数调用:对于所有的事件函数列表,如果还有存在元素并且没有被阻止冒泡,遍历处理:

while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) {

}

最终的调用方法是:ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply(matched.elem, args);

然后做判断:

 // 检测是否有返回值存在
if (ret !== undefined) {
      // 如果处理函数返回值是false,则阻止冒泡,阻止默认动作
       if ((event.result = ret) === false) {
               event.preventDefault();
               event.stopPropagation();
       }
}

  if (special.postDispatch) {
    special.postDispatch.call(this, event);
  }


  return event.result;

到此,从事件的添加,到触发,到兼容处理,再到实际响应就完成了。

回顾一下jQuery的事件流程: 

<div id=‘div_main‘>
    <div id="div_sub"></div>
</div>

<script>
    $("#div_main").on("click",function(){
        console.log("self click");
    });
    $("#div_main").on("click","div",function(){
        console.log("child click");
    });
</script>

1. on方法将参数重新捋一遍然后调用add将两个方法添加到div_main的缓存数据中,形成以下数据结构:

elemData =http://www.mamicode.com/ jQuery._data( "div_main" );
elemData = {
  events: {
    click: {
      0: {
        data: undefined/{...},
        guid: 1,
        handler: function(){console.log("child cilck")},
        namespace: "",
        needsContext: false,
        origType: "click",
        selector: "div",
        type: "click"
      }
      1: {
        data: undefined,
        guid: 2,
        handler: function(){console.log("self click")},
        namespace: "",
        needsContext: false,
        origType: "click",
        selector: undefined,
        type: "click"
      }
      delegateCount: 1,
      length: 2
    }
  }
  handle: function ( e ) {…}{//click事件会触发这个处理函数
    elem: document//属于handle对象的特征
  }
}

注意下有什么特点:

(1)委托事件放在前排头等舱

(2)delegateCount标识了有几个委托事件,如果为0则没有委托事件

(3)selector确定委托对象

然后添加一个handle回调函数

3. click事件触发,浏览器触发事件,调用handle方法,启动dispatch方法

4. 增强event对象为jQuery.Event对象,适配当前事件对象的属性,添加公共属性和私有属性,可以添加自定义属性,重新默认函数,触发jQuery.event.handlers方法。

5. jQuery.event.handlers:从事件源开始往上遍历,每一层遍历再遍历event事件对象数组,也就是上面的elemData.event,做一下判断

(1) 如果有委托事件(delegateCount>0),判断当前节点下是否能找到selector指定的元素,如果有说明需要处理委托事件,将事件触发对象和事件函数push到handlerQueue

(2) 将绑定到本节点的事件函数直接push到handlerQueue

6. 回到dispatch,对handlerQueue筛选出来的事件函数一一处理。

参考最上面的流程图

到此,不管是直接绑定的事件函数还是委托事件函数都已完成。

 

还有什么没说?对,还有兼容性处理special,现在我们把主线走通了,下一篇说一说特殊情况的兼容性处理。

彻底弄懂jQuery事件原理二