第二十四课：jQuery.event.remove，dispatch的源码解读

本课还是来讲解一下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();   //外循环终止

}

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

 

 

 

加油！