首页 > 代码库 > 彻底弄懂jQuery事件原理二
彻底弄懂jQuery事件原理二
上一篇说到，我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法，本篇就来介绍event辅助类
\
先放个图，这其实就是整个事件流程的过程：
1. add方法:
add: function(elem, types, handler, data, selector) { var handleObjIn, eventHandle, tmp, events, t, handleObj, special, handlers, type, namespaces, origType, elemData = data_priv.get(elem); // Don‘t attach events to noData or text/comment nodes (but allow plain objects)
//取出dom对象的数据缓存对象，如果为空或是text,comment节点，直接退出，不会绑定事件 if (!elemData) { return; } // Caller can pass in an object of custom data in lieu of the handler if (handler.handler) { handleObjIn = handler; handler = handleObjIn.handler; selector = handleObjIn.selector; } // Make sure that the handler has a unique ID, used to find/remove it later
//guid是否存在，不存在创建一个，用于标示和删除事件 if (!handler.guid) { handler.guid = jQuery.guid++; } // Init the element‘s event structure and main handler, if this is the first
//检测数据缓存中是否存在事件队列，没有创建一个，用于保存绑定的事件 if (!(events = elemData.events)) { events = elemData.events = {}; } //为数据缓存添加一个事件处理器，后面会用到 if (!(eventHandle = elemData.handle)) { eventHandle = elemData.handle = function(e) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ? jQuery.event.dispatch.apply(eventHandle.elem, arguments) : undefined; }; // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
//定义事件处理器对应的元素，用于防止IE非原生事件中的内存泄露 eventHandle.elem = elem; } // Handle multiple events separated by a space // jQuery(...).bind("mouseover mouseout", fn); // core_rnotwhite:/\S+/g
//多个事件通过空格拆分 types = (types || "").match(core_rnotwhite) || [""]; // 例如：‘.a .b .c‘.match(/\S+/g) → [".a", ".b", ".c"] t = types.length;
//对每个事件进行处理 while (t--) { //命名空间处理 如"mouseover.a.b" → tmp = ["mouseover.a.b", "mouseover", "a.b"] tmp = rtypenamespace.exec(types[t]) || []; type = origType = tmp[1]; namespaces = (tmp[2] || "").split(".").sort();//namespace = [‘a‘,‘b‘] // There *must* be a type, no attaching namespace-only handlers
//如果事件不存在，不处理 if (!type) { continue; } // If event changes its type, use the special event handlers for the changed type
//兼容性处理，后面再说 special = jQuery.event.special[type] || {}; // If selector defined, determine special event api type, otherwise given type type = (selector ? special.delegateType : special.bindType) || type; // Update special based on newly reset type special = jQuery.event.special[type] || {}; // handleObj is passed to all event handlers
//创建事件处理对象，这里保存了事件的各种属性，包括事件名称，数据，guid，委托标签(selector)，处理函数等等 handleObj = jQuery.extend({ type: type, origType: origType, data: data, handler: handler, guid: handler.guid, selector: selector, needsContext: selector && jQuery.expr.match.needsContext.test(selector), namespace: namespaces.join(".") }, handleObjIn); // Init the event handler queue if we‘re the first
// 针对当前事件类型，初始化事件处理列队，如果是第一次使用，则执行初始化
if (!(handlers = events[type])) {
handlers = events[type] = []; handlers.delegateCount = 0; // Only use addEventListener if the special events handler returns false
//真正的逻辑在这里，先不考虑兼容性处理，把上面的事件处理器绑定到DOM对象中去，jQuery2.0.3不兼容低版本浏览器，所以addEventListener是通用的 if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) { if (elem.addEventListener) { elem.addEventListener(type, eventHandle, false); } } } //兼容性处理，先不看 if (special.add) { special.add.call(elem, handleObj); if (!handleObj.handler.guid) { handleObj.handler.guid = handler.guid; } } // Add to the element‘s handler list, delegates in front
//如果有委托参数，将委托函数插入队列的前排头等舱位置 if (selector) { handlers.splice(handlers.delegateCount++, 0, handleObj); } else {
//否则追加到队列后面 handlers.push(handleObj); } // Keep track of which events have ever been used, for event optimization
//标示当前事件曾经处理过，用于事件优化 jQuery.event.global[type] = true; } // Nullify elem to prevent memory leaks in IE
// 设置为null避免IE中循环引用导致的内存泄露
elem = null;
},
整体思路是为当前的dom对象添加两个属性，一个是事件处理队列event_list，一个是事件处理器eventHandler，对用户输入的所有事件进行循环处理，创建事件对象保存到event_list中去，如果事件带有委托对象，则放到前排，否则追加到event_list，再把eventHandler绑定到DOM节点中这个事件中去,最终类似下面的结构：
<div id="#main_div"><span></span></div>
<script>
function handler1(){};
function handler2(){}
$("#main_div").on("click",‘span‘,handler1)
.on("click",handler2);
</script>
创建为：
elemData =http://www.mamicode.com/ jQuery._data( elem ); elemData =http://www.mamicode.com/ { events: { click: {//Array[2] 0: { data: undefined/{...}, guid: 2, //处理函数的id handler: function handler1(){…}, namespace: "", needsContext: false, origType: "click", selector: "span", type: "click" } 1: { data: undefined, guid: 3, handler: function handler2(){…}, namespace: "", needsContext: false, origType: "click", selector: undefined, type: "click" } delegateCount: 1,//委托事件数量，有selector的才是委托事件 length: 2 } } handle: function ( e ) {…}{//click事件会触发这个处理函数 elem: document//属于handle对象的特征 } }
回到上面的eventHandle = elemData.handle，当事件在浏览器触发时，会触发jQuery.event.dispatch.apply(eventHandle.elem, arguments) ，也就是执行dispatch方法：
2. dispatch方法：
dispatch: function(event) { // Make a writable jQuery.Event from the native event object // 通过原生的事件对象创建一个可写的jQuery.Event对象 event = jQuery.event.fix(event); var i, j, ret, matched, handleObj, handlerQueue = [], args = core_slice.call(arguments), handlers = (data_priv.get(this, "events") || {})[event.type] || [], special = jQuery.event.special[event.type] || {}; // Use the fix-ed jQuery.Event rather than the (read-only) native event args[0] = event; // 事件的触发元素 event.delegateTarget = this; // Call the preDispatch hook for the mapped type, and let it bail if desired if (special.preDispatch && special.preDispatch.call(this, event) === false) { return; } // Determine handlers
//handlers就是前面的elementData.event，事件列表
//调用event.handlers方法过滤当前 handlerQueue = jQuery.event.handlers.call(this, event, handlers); // Run delegates first; they may want to stop propagation beneath us i = 0; // 遍历事件处理器队列{elem, handlerObjs}(取出来则对应一个包了)，且事件没有阻止冒泡 while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) { event.currentTarget = matched.elem; j = 0; // 如果事件处理对象{handleObjs}存在(一个元素可能有很多handleObjs)，且事件不需要立刻阻止冒泡 while ((handleObj = matched.handlers[j++]) && !event.isImmediatePropagationStopped()) { // Triggered event must either 1) have no namespace, or // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). // Triggered event must either 1) have no namespace, or // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). // 触发的事件必须满足其一： // 1) 没有命名空间 // 2) 有命名空间，且被绑定的事件是命名空间的一个子集 if (!event.namespace_re || event.namespace_re.test(handleObj.namespace)) { event.handleObj = handleObj; event.data = handleObj.data; // 尝试通过特殊事件获取处理函数，否则使用handleObj中保存的handler(所以handleObj中还保存有handler(事件处理函数)) // handleObj.origType 定义的事件类型 // handleObj.handler 事件处理函数 // 终于到这里了，开始执行事件处理函数 ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler) .apply(matched.elem, args); // 检测是否有返回值存在 if (ret !== undefined) { // 如果处理函数返回值是false，则阻止冒泡，阻止默认动作 if ((event.result = ret) === false) { event.preventDefault(); event.stopPropagation(); } } } } } // Call the postDispatch hook for the mapped type if (special.postDispatch) { special.postDispatch.call(this, event); } return event.result; },
整个过程就是：
1. 当浏览器事件触发时，会触发dispatch方法并传入浏览器event对象。
2. jQuery显然不满意原生event对象，通过fix方法重写了event对象，除了继承了event对象，还添加了一些自己的属性，变成了event对象增强版。
3. 取出当前dom对象数据缓存中的Event列表，也就是事件列表。
4. 调用event.handler方法，把事件列表(handlers,也就是elemData.event)传递进去,对事件列表进行遍历查询，把需要执行的事件对象提取出来放到handlerQueue中去。
5. 对handlerQueue进行遍历，当存在handlerQueue对象并且事件没有阻止冒泡，则最终会调用事件对象函数，也就是调用之前绑定的事件对象函数。
上面是主要的4个步骤，实际上每个步骤都有很多细节要说：
1. 这个很简单，原生事件到jQuery事件的入口。
2. fix方法，返回了加强版的event对象，主要作用是浏览器兼容性处理，加入了jQuery的自己方法，以及可以创建自定义对象等等。
（1）首先对象的类型适配，keyEvent和mouseEvent的事件对象属性是不同的，这里通过fixHooks来进行适配，jQuery.event.props包含了事件对象的公用属性
然后mouseHooks和keyHooks分别包含了鼠标和键盘事件的不同对象，通过下面的逻辑进行合并，将公有属性和私有属性concat到一起，实现了动态适配。
if (!fixHook) { this.fixHooks[type] = fixHook = rmouseEvent.test(type) ? this.mouseHooks : rkeyEvent.test(type) ? this.keyHooks : {}; } copy = fixHook.props ? this.props.concat(fixHook.props) : this.props;
然后参加event = new jQuery.Event(originalEvent);创建加强版event，Event对象下面会说，先执行下面逻辑
i = copy.length; while (i--) {//将原生对象的属性值拷贝过来 prop = copy[i]; event[prop] = originalEvent[prop]; }
//兼容性处理，Cordova不支持target属性，这里添加上 if (!event.target) { event.target = document; }
// text节点不能是target，查找其父节点 if (event.target.nodeType === 3) { event.target = event.target.parentNode; } //钩子方法，将keyEvent和mouseEvent的兼容性处理，见相应的filter方法,比如添加which属性，pageX和pageY属性等等。 return fixHook.filter ? fixHook.filter(event, originalEvent) : event;
最后返回一个全新的Event对象，该对象包含了旧对象的所有方法，还新增了兼容性处理的属性(pageX等),兼容了target属性等等。
（2）创建Event对象：Event构造函数的主要作用就是重写事件默认对象方法，兼容时间戳属性this.timeStamp = src && src.timeStamp || jQuery.now();因为部分浏览器这块有差异，这里统一处理。下面是对象方法：
重写了preventDefault，stopPropagation，stopImmediatePropagation方法，只是在原有的基础上新增了是否调用过的判断，是否调用过就是增加的isDefaultPrevented，isPropagationStopped和isImmediatePropagationStopped几个方法。、
3. handlers = (data_priv.get(this, "events") || {})[event.type] || []；取出事件列表
4. handlerQueue = jQuery.event.handlers.call(this, event, handlers);调用jQuery.event.handlers方法，这个方法主要做两个逻辑处理
(1)从事件源对象event.target开始，一层一层往父节点遍历，每遍历到一个父节点，再遍历event事件对象列表的前排带有委托标识(selector)的元素，看看当前节点是否能查询到委托元素(selector)，如果能查到，说明当前节点是被委托处理事件的节点，也就是说源事件发生以后，当前节点是被委托需要响应事件的，就将该事件函数push到handlerQueue数组中，直到所有遍历完成。
此时handlerQueue数组保存的是当前节点需要处理的需要委托处理的方法。
(2)再把当前节点绑定的事件函数（也就是非委托直接绑定的事件函数） 添加到handlerQueue中去，此时handlerQueue包含了两种事件函数：
1) 其他节点委托到本节点的所有函数列表
2) 直接绑定到本节点的函数列表
到此就返回了当前事件需要响应的所有函数列表。
5. 事件函数调用：对于所有的事件函数列表，如果还有存在元素并且没有被阻止冒泡，遍历处理：
while ((matched = handlerQueue[i++]) && !event.isPropagationStopped()) {
}
最终的调用方法是：ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply(matched.elem, args);
然后做判断：
// 检测是否有返回值存在 if (ret !== undefined) { // 如果处理函数返回值是false，则阻止冒泡，阻止默认动作 if ((event.result = ret) === false) { event.preventDefault(); event.stopPropagation(); } }
if (special.postDispatch) {
special.postDispatch.call(this, event);
}
return event.result;
到此，从事件的添加，到触发，到兼容处理，再到实际响应就完成了。
回顾一下jQuery的事件流程：
<div id=‘div_main‘>
<div id="div_sub"></div>
</div>
<script>
$("#div_main").on("click",function(){
console.log("self click");
});
$("#div_main").on("click","div",function(){
console.log("child click");
});
</script>
1. on方法将参数重新捋一遍然后调用add将两个方法添加到div_main的缓存数据中，形成以下数据结构:
elemData =http://www.mamicode.com/ jQuery._data( "div_main" ); elemData = { events: { click: { 0: { data: undefined/{...}, guid: 1, handler: function(){console.log("child cilck")}, namespace: "", needsContext: false, origType: "click", selector: "div", type: "click" } 1: { data: undefined, guid: 2, handler: function(){console.log("self click")}, namespace: "", needsContext: false, origType: "click", selector: undefined, type: "click" } delegateCount: 1, length: 2 } } handle: function ( e ) {…}{//click事件会触发这个处理函数 elem: document//属于handle对象的特征 } }
注意下有什么特点：
(1)委托事件放在前排头等舱
(2)delegateCount标识了有几个委托事件，如果为0则没有委托事件
(3)selector确定委托对象
然后添加一个handle回调函数
3. click事件触发，浏览器触发事件，调用handle方法，启动dispatch方法
4. 增强event对象为jQuery.Event对象，适配当前事件对象的属性，添加公共属性和私有属性，可以添加自定义属性，重新默认函数，触发jQuery.event.handlers方法。
5. jQuery.event.handlers：从事件源开始往上遍历，每一层遍历再遍历event事件对象数组，也就是上面的elemData.event,做一下判断
(1) 如果有委托事件(delegateCount>0)，判断当前节点下是否能找到selector指定的元素，如果有说明需要处理委托事件，将事件触发对象和事件函数push到handlerQueue
(2) 将绑定到本节点的事件函数直接push到handlerQueue
6. 回到dispatch，对handlerQueue筛选出来的事件函数一一处理。
参考最上面的流程图
到此，不管是直接绑定的事件函数还是委托事件函数都已完成。
还有什么没说？对，还有兼容性处理special，现在我们把主线走通了，下一篇说一说特殊情况的兼容性处理。
彻底弄懂jQuery事件原理二