第二十四课:jQuery.event.remove,dispatch的源码解读

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

本课还是来讲解一下jQuery是如何实现它的事件系统的。这一课我们先来讲一下jQuery.event.remove的源码解读。

remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的handleObj对象移除,在参数不足的情况下,可能移除多个或所有的handleObj。当队列的长度为0(当某事件的事件处理函数数组为空时,就代表此类型事件没有事件处理函数了,因此移除此事件)时,就移除相应的事件,当events为空对象(events是元素绑定的所有事件类型的集合,当它为空时,就代表元素没有绑定任何事件,那么就没有必要再保存元素在缓存系统的唯一标识了)时,就清除掉UUID(也就是元素在缓存系统中唯一的标识)。

接下来,我们来看它的源码:

remove = function(elem,types,handler,selector){

  var t,tns,type,origType,namespaces,origCount,j,events,special,eventType,handleObj,

    elemData = jQuery.hasData(elem) && jQuery._data(elem);

  if(!elemData || !(events = elemData.events)){   //如果缓存系统中没有有关这个元素的数据,或者不支持添加自定义属性(jQuery._data(elem))就直接返回。如果支持添加自定义属性,并且缓存系统中有这个元素的数据,但如果有关这个元素的事件处理函数为空,也直接返回,因为没有什么可以移除了,此元素本身就没有绑定任何事件处理函数。

    return;

  }

  types = jQuery.trim(hoverHack(types||"")).split(" ");   //处理hover事件的,它需要转换成mouseenter和mouseleave两个事件

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

    ....

    type = origType = types[t];

    ....

    if(!type){   //如果没有指定需要移除的事件类型,那么就移除所有事件类型或所有与此命名空间有关的事件类型

      for( type in events){

        jQuery.event.remove(elem,type,handler,selector,true);

      }

      continue;

    }   

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

    type = (selector ? special.delegateType: special.bindType) || type; //对于事件代理的绑定,需要针对不能冒泡的事件进行处理,取得真正用于绑定的事件类型

    eventType = events[type] || []; //取得此事件类型的装载事件描述对象的数组

    origCount = eventType.length;

    for(j=0;j<eventType.length;j++){   //移除数组中符合条件的事件描述对象

      handleObj = eventType[j];

      if(origType===handleObj.origType&&   //比较事件类型是否一致

        !handler || handler.guid === handleObj.guid&&  //如果没有传入事件处理函数,或者传入了,并且guid等于事件描述对象的guid,就继续判断

          !namespace || namespace.test(handleObj.namespace) && //如果types有命名空间,就判断他们的命名空间是否一样

            !selector || selector === handleObj.selector //如果是事件代理,就判断事件代理是否一致,

      ){

        eventType.splice(j--,1);   //移除这个事件描述对象

        if(handleObj.selector){   //如果是事件代理的事件描述对象被移除,就把delegateCount减一

          eventType.delegateCount--;

        }

        .....

      }

    }

    if(eventType.length === 0 && origCount ! ==eventType.length){//如果事件描述对象数组为空,并且是因为上面for循环移除之后才为空的,就进入if语句。之所以加上后面的那个判断,是因为eventType本身如果是空的,并不是通过for循环移除的,那进入到if语句,会出现死循环

      .....

      delete events[type];   //删除此类型事件的属性。因此此类型事件没有事件处理函数了,被全部删除了

    }

  }    

  if(jQuery.isEmptyObject(events)){//如果此元素的所以事件类型的属性都被删除了,那么events将是一个空对象

      delete elemData.handle;     //既然此元素的所有事件类型都没有了,就证明此元素没有绑定任何事件,那么也要删除通过add添加给它的回调方法(此回调方法会调用此元素的所有回调方法)。

      jQuery.removeData(elem,"events",true);   //移除这个元素在缓存系统中的events空间(清楚这个元素在缓存空间的UUID)。

  }

}

接下来,我们来讲一下jQuery.event.dispatch的源码:

jQuery就是利用这个dispatch方法,从缓存体中的events对象取得对应队列,然后修复事件对象event,传入用户的回调中执行,根据回调的返回值决定是否停止循环,是否阻止默认行为和事件冒泡。

dispatch = function(event){

  event = jQuery.event.fix(event || window.event);    //解决W3C和IE事件对象的差异,比如:W3C,event.target等于IE的event.srcElement

  var i,j,cur,ret,selMatch,matched,matched,handleObj,sel,related,

    handlers = ((jQuery._data(this,"events") || {}) [event.type]  || [],  //得到缓存系统中this(操作的元素)的events对象,然后取它的事件类型(你触发的event的类型)属性对象,这个属性对象就是装有事件描述对象的数组。

      delegateCount = handlers.delegateCount,  //得到这个事件描述对象数组有多少个使用了事件代理

        args = core_slice.call(arguments),   //[].slice.call(arguments),转换成数组

          ...

          special = jQuery.event.special[event.type]  || {},   //解决特殊的事件类型

            handlerQueue = [];

  ....

  if(delegateCount && !(event.button && event.type === "click")){  //这里先讲一下event.button这个属性,这个属性,代表用户点击了鼠标的左键还是右键,还是滚动条,等等。IE与标准浏览器的值不一样,比如,左键IE下是1,而其他浏览器是0等。但是在上面的代码中已经修复了event对象,因此IE下,点击左键也就是0.因此上面的if语句的意思是:如果有事件代理,并且是左键点击(event.button=0),就进入if语句。

    for(cur = event.target ; cur != this;cur = cur.parentNode || this){ //从事件源开始,遍历其所有的祖先,一直到绑定事件的元素

      if(cur.disabled !==true || event.type !== click){//如果元素是被禁止的,并且事件类型是click,就不进入if语句。意思就是不能在被禁止的元素上触发click事件

        ....

        matches = []; //用于收集符合条件的事件描述对象

        for(i=0;i<delegateCount;i++){  //使用事件代理的事件描述对象总是排在数组前面

          handleObj = handlers[i];

          sel = handleObj.selector;  //获取这个事件描述对象的执行上下文

          if(selMatch[sel] ===undefined) {  //第一次时,selMatch[sel]是undefined

            selMatch[sel] =  jQuery.find(sel,this,null,[cur]).length;  //sel,当前事件描述对象的执行上下文,this事件触发的元素,cur当前遍历的元素。如果cur当前遍历的元素匹配,就为真,不匹配就为假

          }

          if(selMatch[sel]){  //如果当前元素在事件描述对象中匹配

            matches.push(handleObj);  //就把这个事件描述对象收集起来。有多少元素在事件描述对象数组中匹配,就收集多少个事件描述对象。

          }

        }

        if(matches.length){

          handlerQueue.push({elem:cur,matches:matches});//如果当前遍历的元素,匹配事件描述对象数组中的一个或以上。就把这些组装成一个json对象存储起来。

        }

      }

    }   

  } 

  if(handlers.length > delegateCount){   //如果有不是事件代理的事件描述对象,将把这些事件描述对象与绑定事件的元素组装成json,存储起来

    handlerQueue.push({elem:this,matches:handlers.slice(delegateCount)});

  } 

  for(i=0;i<handlerQueue.length && !event.isPropagationStopped();i++){   //遍历handlerQueue数组,条件是event没有停止冒泡。

    matched = handlerQueue[i];

    event.currentTarget = matched.elem;  //事件冒泡到的当前目标元素。这里的currentTarget跟原生js绑定事件的currentTarget(绑定事件的元素)不一样,这里相当于原生的target(实际触发事件的元素)

    for(j=0;j<matched.matches.length && !event.isImmediatePropagationStopped();j++){//遍历当前目标元素中所有与event.type同类型的事件描述对象数组。条件是用户没有执行停止冒泡的方法。(用户调用stopImmediatePropagation方法,isImmediatePropagationStopped方法就会返回true)

      handleObj = matched.matches[j] ;   //取到这个事件描述对象

      .....

      event.data = handleObj.data;

      event.handleObj = handleObj;   //把事件描述对象赋给事件的handleObj属性

      ret =( (jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler ).apply(matched.elem,args) ;// 先看此事件描述对象中的事件类型是否是特殊事件,如果是,就调用它的handle方法。如果不是,就直接调用事件描述对象的handler方法。执行上下文是在当前遍历的目标元素中。

      if(ret!==undefined){

        event.result = ret;  //如果事件处理函数执行后,返回值不是undefined,就赋给event的result属性

        if(ret === false){  //如果事件处理函数返回false

          event.preventDefault();   //阻止默认事件

          event.stopPropagation();  //停止冒泡,isPropagationStopped会返回true,这时就会停止外层循环

        }

      }

    }

  }

  return event.result;   //返回事件处理函数执行后的返回值。

} 

dispatch的难点在于,模拟事件传播的机制,其实就是事件冒泡的机制。 

stopImmediatePropagation:function(){

  this.isImmediatePropagationStopped = function(){ return true };   //内循环终止

  this.stopPropagation();   //外循环终止

}

这个方法会让内循环和外循环都终止。

加油!