本课还是来讲解一下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(); //外循环终止
}
这个方法会让内循环和外循环都终止。
加油!