第二十三课:jQuery.event.add的原理以及源码解读

时间:2022-03-06 02:28:54

本课主要来讲解一下jQuery是如何实现它的事件系统的。

我们先来看一个问题:

如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99次绑定,更何况它还能监听将来添加的tr元素。这就是jQuery中的live方法。

这种机制使用的是事件冒泡机制实现的,我们把事件处理函数绑定在tr的父元素上,然后再tr上面触发的事件会冒泡到tr的父元素,因此父元素就可以触发这个事件处理函数,在事件处理函数中就可以通过这个event获取到事件源,然后对事件源tr进行处理。

不过,live方法需要对一些不冒泡的事件做一些处理,比如一些表单事件,有的只冒泡到form,有的冒泡到document,有的压根不冒泡。

对于focus,blur,change,submit,reset,select等不会冒泡的事件(有些浏览器支持,有些不支持),在标准浏览器下,我们可以设置addEventListener的最后一个参数为true(捕获)就行了,因为捕获操作的话,事件会从document到事件源,这时就能使用事件代理机制了。IE就比较麻烦了,要用focusin代替focus,focusout代替blur,selectstart代替select。change,submit,reset就复杂了,必须用其他事件来模拟,还要判断事件源的类型,selectedIndex,keyCode等相关属性。这个课题被一个叫reglib的库搞定了。jQuery就是吸取了reglib的经验,兼容了各种事件。使用live方法进行事件代理时,最好是绑定目标元素的父元素,因为绑定document的话,在IE下有时还是会失灵。

首先,来看一下jQuery.event.add的源码解读:

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

  var elemData,eventHandle,events,t,tns,type,namespaces,handleObj,handleObjIn,handlers,special;   //定义一系列的变量

  if(elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data(elem))){

  //如果元素是文本节点(IE下访问文本节点会抛错,因为事件源不能为文本节点),就直接返回。元素也不能是注释节点。事件类型和事件处理函数不能没有。如果元素不能添加自定义属性,也直接返回。如果元素elem可以添加自定义属性,会在jQuery的缓存系统中添加这个元素的缓存对象,并返回,这时elemData就是缓存系统中,以元素elem为属性的对象。

    return;

  }

  if(handler.handler){     //如果传进来的事件处理函数是一个json对象{handler:function(){处理函数},selector:执行上下文}

    handleObjIn = handler;

    handler = handleObjIn.handler;

    selector = handleObjIn.selector;

  }

  if(!handler.guid){    //如果事件处理函数没有唯一的guid属性,就赋值一个

    handler.guid = jQuery.guid ++;         //jQuery.guid从1开始,累加,因此每一个事件处理函数的guid属性都是唯一的。

  }

  events = elemData.events;    //如果此元素elem之前没有绑定过事件处理函数,它在缓存系统中以元素elem为属性的对象的events属性将是undefined

  if(!events){  //也就是说,如果之前给这个元素elem绑定过事件处理函数,那么这时的events将是一个对象,不会进入if语句

    elemData.events = events = {};   //设为对象

  }

  eventHandle = elemData.handle;   //第一次绑定时,为undefined

  if(!eventHandle){      //给此元素elem绑定事件处理函数 function,这个function会处理用户绑定该元素的所有事件处理函数(哪种类型的事件触发,就执行哪种事件绑定的所有事件处理函数)

    elemData.handle = eventHandle = function(e){

      ....

    }

    eventHandle.elem = elem;    //这个function的elem属性就是这个元素elem

  }

  types = jQuery.trim(hoverHack(types)).split(" ");  //因为绑定事件类型时,可能传入多个事件,比如:"mouseover mouseout",需要转换成[mouseover,mouseout],hoverHack是来处理hover这个事件的,它需要转换成mouseenter和mouseleave两个事件。

  for(t=0;t<types.length;t++){

    ....

    type = types[t];

    special = jQuery.event.special[type] || {}; //并不是所有的事件都能直接使用,比如:火狐下没有mousewheel,需要用DOMMouseScroll冒充

    type = (selector ? special.delegateType: special.bindType) || type; //有些事件只需要在事件代理时,需要冒充。比如:focus,blur,不冒泡的,事件代理使用的就是冒泡机制,所有需要做特殊化处理。

    special = jQuery.event.special[type] || {};

    handleObj = jQuery.extend({

      type:type,   //处理后的事件类型

      origType:types[t],  //真正的事件类型

      data:data,

      handler:handler,

      guid:handler.guid,

      selector:selector

      .....

    }, handleObjIn)

    handlers = events[type];   //查看此元素在缓存系统中是否有此事件类型的数组处理函数。第一次绑定此type类型的事件时,是undefined。

    if(!handlers){

      handlers = events[type] = [];  //此数组就是用来装载此类事件的事件处理函数的

      handlers.delegateCount = 0; //记录要处理的事件代理回调函数的个数

      .....

      if(elem.addEventListener){

        elem.addEventListener(type,eventHandle,false);//给元素绑定此类型事件的事件处理函数,如果下次继续给此元素绑定此类型事件的事件处理函数,就不会调用这里,直接把事件处理函数放进events[type]数组。

      }else{

        elem.attachEvent("on"+type,eventHandle);     //eventHandle事件处理函数就是elemData.handle方法,就是上面定义的function,里面会操作所有的事件处理函数

      }

    }

    ......

    if(selector) {  //如果是使用事件代理,那么就把事件描述对象放到数组的前面

      handlers.splice(handlers.deletegateCount, 0 , handleObj);

    }else{

      handlers.push(handleObj);

    }

    ....

  }

  elem = null;   //防止ie内存泄露

}

add方法的目的是,将用户传递的所有参数,合成一个handleObj对象,并把这个对象放到缓存系统中。放入缓存系统时,需要遵守一定的规则,必须是elem元素在缓存系统中对应的位置,同时,针对不同的事件类型type,创建不同的事件处理函数数组(数组中的每一项就是一个事件描述对象),每个事件处理函数数组,处理相对应的事件。因此对于同一个元素,并且同一事件,它只会绑定一次,如果对元素div1绑定两次click,那么第二个的事件处理函数,将直接添加到事件处理函数数组中(div1.click = [],其中的div1不是元素本身,而是缓存系统中跟元素div1相对应的唯一的(UUID)属性对象)。

同时add方法,会给元素elem的types中的事件类型绑定一个统一的事件处理函数eventHandle,比如:给元素elem绑定click和mouseover,它们的事件处理函数都是eventHandle。只是在这个方法中,会根据事件类型的不同,触发响应的事件处理函数。比如,触发click事件,eventHandle只会执行div1.click数组中的事件处理函数,而不是执行div1.mouseover数组中的事件处理函数。

从上可知,jQuery的回调不再与元素直接挂钩,而是通过UUID访问数据缓存系统,再根据事件类型得到一组事件描述对象。

元素与数据缓存系统之间的结构图:

第二十三课:jQuery.event.add的原理以及源码解读

elem在缓存系统中唯一的对应值是elemData.它有两个属性值handle和events,handle是一个回调函数,并且它有一个elem属性指向elem元素。events是一个json对象,它里面有很多属性,每个属性都是事件的类型,比如,click,mousemove。click这种属性值是一个数组,数组中存放的是事件描述对象。同时这个数组还有一个delegateCount属性,它代表代理事件描述对象的个数。事件描述对象是一个json对象,里面有各种属性,其中handler是真正的事件处理函数。

加油!