本课主要来讲解jQuery.event.trigger的源码解读。
trigger = function(event, data, elem, onlyHandlers){
if(elem && (elem.nodeType === 3 || elem.nodeType ===8)){ //触发的元素节点不能是文本节点和注释节点
return;
}
var cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType, type = event.type || event , namespaces =[];
.....
if(type.indexOf(".") >= 0 ){ //如果事件类型带点号,就代表有命名空间,所以需要分解出命名空间
namespaces = type.split(".");
type = namespaces.shift();
namespaces.sort();
}
if((!elem || jQuery.event.customEvent [ type ]) && !jQuery.event.global[type]){ //如果元素不存在或者事件类型是自定义事件,并且之前从来没有绑定过此类型的事件,那么就直接返回。
return;
}
....
ontype = type.indexOf(":") < 0 ? "on" + type : ""; //如果事件类型没有:字符,就证明是ontype绑定事件
if(!elem){ //如果没有指明触发元素,就把整个缓存系统找一遍
cache = jQuery.cache;
for(i in cache){
if(cache[i].events && cache[i].events[ type ]){ //从缓存系统中,找相对应的events属性,并找到要触发事件类型的events[type]
jQuery.event.trigger(event,data,cache[i].handle.elem,true); //触发所有绑定了此事件类型的回调方法。
}
}
return; //直接返回
}
event.result = undefined;//清掉event的result属性,方便重复使用。
if(!event.target){
event.target = elem;
}
data = data!=null ? jQuery.makeArray(data) :[]; //如果传入了参数,就把参数转换成数组类型
data.unshift(event); //把事件对象放入数组的第一项
special = jQuery.event.special[type] || {}; //事件类型是否需要进行特殊化处理,比如:mousescroll事件
if(special.trigger && special.trigger.apply(elem,data) === false){ //如果事件类型已经有trigger方法,就调用它,如果返回结果是false,就直接返回。
return;
}
eventPath = [[elem, special.bindType || type]]; //规划冒泡的路径,从当前元素,一直到window
if(!onlyHandlers && !special.noBubble && !jQuery.isWindow(elem)){ //如果元素的事件类型没有阻止冒泡,并且元素不是window对象,就要进行冒泡模拟。
bubbleType = special.delegateType || type; //得到事件的类型
cur = elem.parentNode;
for(old = elem; cur ; cur = cur.parentNode){ //把当前元素的所有父元素,都进行一次事件类型的冒泡。假设div1(当前元素,触发click事件)上面有一个div2,div2上面有body,body上面有html,html上面有document。那么eventPath的数组是:[[div1,click],[div2,click],[body,click],[html,click],[document,click]]
eventPath.push([cur, bubbleType]);
old = cur;
}
if(old === (elem.ownerDocument || document)){ //当old为document时,cur为空,就退出循环
eventPath.push([old.defaultView || old.parentWindow || window, bubbleType]); //模拟冒泡到window对象
}
}
for(i=0;i<eventPath.length&&!event.isPropagationStopped(); i++){ //沿着上面规划好的冒泡路线,把经过的元素节点的指定类型事件的回调逐一触发执行
cur = eventPath[i][0]; //元素
event.type = eventPath[i][1] //事件类型
handle = (jQuery._data(cur,"events") || {})[event.type] && jQuery._data(cur,"handle");//先判断在缓存系统中是否有此元素绑定的此事件类型的回调方法,如果有,就取出来。
if(handle){ //执行这些回调方法
handle.apply(cur,data);
}
handle = ontype && cur[ontype]; //如果有onXXX绑定的回调,无论是写在js中,还是html标签内,都会取到
if(handle && jQuery.acceptData(cur) && handle.apply && handle.apply(cur, data) === false){//如果handle不为空,并且当前元素能绑定数据,并且handle有apply方法,就执行handle回调方法,如果当前回调返回false,就阻止默认事件。
event.preventDefault();
}
}
event.type = type;
if(!onlyHandlers && !event.isDefaultPrevented()){ //如果没有执行preventDefault方法,或上面的handle方法返回false(也会阻止默认事件)。就模拟默认行为。具体是指模拟:submit,blur,focus,select,reset,scroll等方法。
if((!special._default || special._default.apply(elem.ownerDocument,data) === false) && //如果用户指定了默认行为,就执行指定的默认行为,如果指定的默认行为返回false,就继续判断下面的条件
!(type === "click" && jQuery.nodeName(elem, "a"))&& //如果事件类型是click,并且是在a标签上触发的,就不执行它的默认行为了,否则继续判断
jQuery.acceptData(elem)){ //如果当前元素可以绑定数据
if(ontype && elem[type] && //如果元素有onXXX回调,并且元素有type方法,比如:<input type ="submit" onsubmit="function(){}">,它有onXXX的回调方法,也有input.submit的方法,因此继续判断
((type!=="focus" && type!=="blur") || event.target.offsetWidth !==0) && //如果事件类型不是focus,blur。或事件类型是focu,blur,但是触发这个事件的元素不是隐藏的(隐藏的元素,它的offsetWidth为0),就继续判断。(触发隐藏元素的focus和blur默认行为,IE6-8下会抛出错误。)
!jQuery.isWindow(elem)){ //不是window元素就进入if语句执行默认行为。(window的默认行为触发,会出现问题,比如:window.scroll方法,在IE与标准浏览器存在差异,IE会默认scroll()方法为scroll(0,0))
old = elem[ontype];
if(old){
elem[ontype] = null; //onXXX的回调已经执行过了,就不用再次执行了
}
jQuery.event.triggered = type; //标识正在触发此事件类型,防止下面的elem [ type ] ()重复执行dispatch方法
elem [ type ] (); //执行默认行为,比如:input[submit](),input元素的提交方法。点击类型为submint的input,会默认执行submit属性方法。但是这里不会调用dispatch方法。
jQuery.event.triggered = undefined; //还原
if(old){
elem[ontype] = old;
}
}
}
}
return event.result;
}
笼统来说,trigger就是dispatch的加强版。dispatch只触发当前元素与其底下元素(通过事件代理的方式)的回调。trigger则是模拟整个冒泡过程,除了它自身,还触发其祖先节点与window的同类型的回调。不过从trigger的代码来看,它比dispatch多做的事就是触发事件的默认行为。其实trigger要做的事就是在某一元素触发一个回调(dispatch),然后让它顺势冒泡,触发其他回调(dispatch)就行了。
浏览器提供了原生派发机制,IE下叫fireEvent,标准浏览器为dispatchEvent。IE下的问题是,有许多事件不能冒泡或不能冒泡到顶层,如果我们把IE的代码独立出来,标准浏览器用一套,IE用一套(旧版本IE,IE9在标准模式中支持dispatchEvent方法了),这样性能大大提高。zepto.js就是这么干的。
在创建万能事件对象时,理应document.createEvent("Events");但早期浏览器需要用document.createEvent("HTMLEvents");
万能事件理应能触发所有事件的回调,但是鼠标事件,要用MouseEvents参数创建鼠标对象事件才行。
火狐不支持mousewheel,我们需要用document.createEvent("MouseScrollEvents")创建DOMMouseScroll事件对象。
加油!