jQuery-1.9.1源码分析系列（十）事件系统——事件委托

<style>    #big{      width: 400px;      height: 400px;      background-color: #00f;    }    #middle{      width: 200px;      height: 200px;      background-color: #000;    }    #small{      width: 100px;      height: 100px;      background-color: #f00;    }</style><div id="big"><div id="middle"><div id="small"></div></div></div>

<script>  document.getElementById('big').onclick = function(){console.log("big clicked!")}  document.getElementById('middle').onclick = function(){console.log("middle clicked!")}  document.getElementById('small').onclick = function(){console.log("small clicked!")}</script>

   if ( !(eventHandle = elemData.handle) ) {        eventHandle = elemData.handle = function( e ) {            //当一个事件被调用后页面已经卸载，则放弃jQuery.event.trigger()的第二个事件，            return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?            jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :            undefined;        };        //将elem作为handle函数的一个特征防止ie非本地事件引起的内存泄露        eventHandle.elem = elem;    }
    ...
            //非自定义事件，如果special事件处理器返回false，则只能使用addEventListener/attachEvent            if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {                //给元素绑定全局事件                if ( elem.addEventListener ) {                    elem.addEventListener( type, eventHandle, false );                } else if ( elem.attachEvent ) {                    elem.attachEvent( "on" + type, eventHandle );                }            }

//从本地事件对象构造一个可写的jQuery.Eventevent = jQuery.event.fix( event );
...
//使用修正过得jQuery.Event而不是(只读的)本地事件
args[0] = event;
event.delegateTarget = this;

        handlers = ( jQuery._data( this, "events" ) || {} )[ event.type ] || [],

//获取指定的事件处理队列，主要使用event.target事件源节点不断循环往上查找父节点，//看些节点和是否在handlers中的选择器对应的节点中handlerQueue = jQuery.event.handlers.call( this, event, handlers );

if ( delegateCount && cur.nodeType && (!event.button || event.type !== "click") ) {　　//冒泡父节点，找到匹配的委托事件存入handlerQueue队列　　for ( ; cur != this; cur = cur.parentNode || this ) {　　　　if ( cur.nodeType === 1 && (cur.disabled !== true || event.type !== "click") ) {　　　　　　matches = [];　　　　　　for ( i = 0; i < delegateCount; i++ ) {
　　　　　　　　// 避免和Object.PRototype属性冲突(#13203)
　　　　　　　　sel = handleObj.selector + " ";
　　　　　　　　if ( matches[ sel ] === undefined ) {
　　　　　　　　　　matches[ sel ] = handleObj.needsContext ?
　　　　　　　　　　jQuery( sel, this ).index( cur ) >= 0 :
　　　　　　　　　　jQuery.find( sel, this, null, [ cur ] ).length;
　　　　　　　　}
　　　　　　　　　　
　　　　　　　　if ( matches[ sel ] ) {
　　　　　　　　　　matches.push( handleObj );
　　　　　　　　}
　　　　　　}
　　　　　　//添加委托处理到队列中
　　　　　　if ( matches.length ) {
　　　　　　　　handlerQueue.push({ elem: cur, handlers: matches });
　　　　　　}
　　　　}
　　}
}

//添加直接绑定的事件到handlerQueue队列中if ( delegateCount < handlers.length ) {　　handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) });}

//先运行代理，他们可能是阻止冒泡的，我们可以利用这一点i = 0;while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) {        event.currentTarget = matched.elem;        j = 0;        while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) {            //触发事件的条件：1)没有命名空间，或            // 2)有命名空间的子集或等于那些边界事件（他们两者都可以没有命名空间）            if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) {                event.handleObj = handleObj;                event.data = handleObj.data;                //执行                ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )                .apply( matched.elem, args );                if ( ret !== undefined ) {                    if ( (event.result = ret) === false ) {                        event.preventDefault();                        event.stopPropagation();                    }                }            }        }    }

function dohander(e){　　alert("dohander");};function dot(e){　　e.stopPropagation();　　alert("dot");};
$(document).on("click",'#big',dohander).on("click",'#middle',dot).on("click",'#small',dohander);

//"#small"节点的委托事件处理已经被jQuery.event.handlers过滤掉了handlerQueue = ["#middle"节点的委托事件处理dot, "#big"节点的委托事件处理dohander];

        stopPropagation: function() {            var e = this.originalEvent;            this.isPropagationStopped = returnTrue;            if ( !e ) {                return;            }            // If stopPropagation exists, run it on the original event            if ( e.stopPropagation ) {                e.stopPropagation();            }            // Support: IE            // Set the cancelBubble property of the original event to true            e.cancelBubble = true;        }

while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) 

  function dohander(e){    alert("dohander");  };  function dot(e){    e.stopPropagation();    alert("dot");  };  function doBigOnly(e){    alert("big");  }  $(document).on("click",'#big',dohander)  .on("click",'#middle',dot)  .on("click",'#small',dohander);  $('#big').click(doBigOnly);