首页 > 代码库 > 第二十五课：事件系统4
第二十五课：事件系统4
本课主要来讲解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 = http://www.mamicode.com/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事件对象。
加油！
第二十五课：事件系统4