jQuery事件

jQuery事件 .on():

使用方法：

$('#div1').on('click',function(){
		alert(123);
	});
	
$('#div1').on('click',{name:'hello'},function(ev){
		alert(ev.data.name);
	});
	
$('ul').on('click','li',{name:'hello'},function(){
	$(this).css('background','red');
});//委托

$('ul').delegate('li','click',{name:'hello'},function(){
	$(this).css('background','red');
});

$('#div1').on('click mouseover',function(){
	alert(123);
});//两个事件用空格分开                           

//也可以写成json对象的格式

$('#div1').on('click',function(){alert(123);});$('#div1').on('mouseover',function(){alert(456);});$('#div1').on({'click' : function(){alert(123);},'mouseover' : function(){alert(456);}});

.on()方法 提供绑定事件处理的所有功能：jQuery中的事件都调用了.on()

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		return arguments.length > 0 ?
			this.on( name, null, data, fn ) :
			this.trigger( name );
	};
});

jQuery.fn.extend({
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	},

	bind: function( types, data, fn ) {
		return this.on( types, null, data, fn );
	},
	unbind: function( types, fn ) {
		return this.off( types, null, fn );
	},

	delegate: function( selector, types, data, fn ) {
		return this.on( types, selector, data, fn );
	},
	undelegate: function( selector, types, fn ) {
		// ( namespace ) or ( selector, types [, fn] )
		return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
	}
});

.on()函数原理：

缓存对象：事件执行实际就是执行缓存对象的handle()函数，该函数会调用

jQuery.event.dispatch.apply( eventHandle.elem, arguments )

jQuery.event.dispatch()主要分成三部分：

1.jQuery.event.fix()通过原生事件对象生成jQuery事件对象，功能更加强大

2.特殊事件的处理

3.执行顺序的处理

首先分析jQuery事件对象的生成

fix: function( event ) {//参数是原生事件对象，函数结果是强大的jQuery事件对象
		if ( event[ jQuery.expando ] ) {
			return event;
		}

		// Create a writable copy of the event object and normalize some properties
		var i, prop, copy,
			type = event.type,//原生事件类型
			originalEvent = event,//原生事件对象
			fixHook = this.fixHooks[ type ];
     //事件触发时，执行jQuery.event.dispatch(),就会执行jQuery.event.fix()
     //可能是鼠标事件，也可能是键盘事件，以及其它事件
     //如果是鼠标事件，fixHook=jQuery.event.mouseHooks
		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;//JQ中共享原生JS的event属性

		event = new jQuery.Event( originalEvent );//创建jQuery事件对象

		i = copy.length;
		//将原生事件对象的属性以及对应的值，添加到jQuery事件对象中去
		while ( i-- ) {
			prop = copy[ i ];
			event[ prop ] = originalEvent[ prop ];
		}

		// Support: Cordova 2.5 (WebKit) (#13255)
		// All events should have a target; Cordova deviceready doesn't
		if ( !event.target ) {
			event.target = document;
		}

		// Support: Safari 6.0+, Chrome < 28
		// Target should not be a text node (#504, #13143)
		if ( event.target.nodeType === 3 ) {
			event.target = event.target.parentNode;
		}
    //最终都是返回jQuery事件对象，如果是鼠标，键盘事件需要给jQuery事件对象再添加一些属性
		return fixHook.filter? fixHook.filter( event, originalEvent ) : event;
	},

jQuery.event.fix()代码所需分析的函数

// Includes some event props shared by KeyEvent and MouseEvent
	props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),

	fixHooks: {},

	keyHooks: {
		props: "char charCode key keyCode".split(" "),
		filter: function( event, original ) {

			// keyCode对onkeypress事件无效
			if ( event.which == null ) {
				event.which = original.charCode != null ? original.charCode : original.keyCode;
			}

			return event;
		}
	},

	mouseHooks: {
		props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
		filter: function( event, original ) {
			var eventDoc, doc, body,
				button = original.button;

			// Calculate pageX/Y if missing and clientX/Y available
			//低版本IE浏览器不支持pageX/Y，clientX/Y浏览器都支持
			if ( event.pageX == null && original.clientX != null ) {//此处event是封装后的事件对象，original原生事件对象
				eventDoc = event.target.ownerDocument || document;
				doc = eventDoc.documentElement;
				body = eventDoc.body;

				event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
				event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
			}

			// Add which for click: 1 === left; 2 === middle; 3 === right
			// Note: button is not normalized, so don't use it
			if ( !event.which && button !== undefined ) {//左键 右键 中键
				event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
			}

			return event;
		}
	},

3.事件处理顺序：jQuery.event.handlers()

handlers: function( event, handlers ) {//参数handlers  对应 click数组
		var i, matches, sel, handleObj,
			handlerQueue = [],
			delegateCount = handlers.delegateCount,
			cur = event.target;

		// Find delegate handlers
		// Black-hole SVG <use> instance trees (#13180)
		// Avoid non-left-click bubbling in Firefox (#3861)
		if ( delegateCount && cur.nodeType && (!event.button || event.type !== "click") ) {

			for ( ; cur !== this; cur = cur.parentNode || this ) {

				// Don't process clicks on disabled elements (#6911, #8165, #11382, #11764)
				if ( cur.disabled !== true || event.type !== "click" ) {
					matches = [];
					for ( i = 0; i < delegateCount; i++ ) {
						handleObj = handlers[ i ];

						// Don't conflict with Object.prototype properties (#13203)
						sel = handleObj.selector + " ";//委托事件才有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[ sel ]是undefined
							matches.push( handleObj );
						}
					}
					if ( matches.length ) {
						handlerQueue.push({ elem: cur, handlers: matches });console.log(handlerQueue);
					}
				}
			}
		}

实例分析：弹出框顺序：2,1,3

elemData中委托事件放在前面，普通事件放在后面，两种事件类型中事件都是按顺序排列
但是在执行委托事件时，委托层级深的先执行，委托事件的执行顺序和委托层级相关

	<body>
		<div>
			<span> span</span>
			<span> span</span>
			<span> span</span>
		</div>
	<script type="text/javascript">
	//elemData中委托事件放在前面，普通事件放在后面，两种事件类型中事件都是按顺序排列
	//但是在执行委托事件时，委托层级深的先执行，委托事件的执行顺序和委托层级相关
	 $('body').on('click',function(){alert(3);})
	 $('body').on('click','div',function(){alert(1)})
     $('body').on('click.bbb.aaa','span',{name:'hello'},function(event){
	    $(this).css('background','red');
	    alert(2)
       });
	</script>
	</body>

缓存数据

var elemData = {
		events : {
			'click' : [      //arr  arr.delegateCount 委托的个数  arr.length = 2
				{},   //委托的,
				{
					data: undefined,
					guid: 3,
					handler: function (){},//普通函数，.on('click',function(){}),表面是事件函数，本质是普通函数
					namespace: "",
					needsContext: false,//针对委托，没有委托是undefined，一般委托false，伪类委托true
					origType: "mouseenter",//.on('mouseenter',function(){}),不兼容
					selector: "span",//委托选择器
					type: "mouseover",//mouseenter不兼容，用mouseover模拟
				},
			],
			'mouseover' : [
				{}
			]
		},
		handle : function(e){}//真正的事件函数(源码中)
	};
});

.trigger():会执行缓存对象的handle()。.trigger()可以执行click等原生事件也可以执行自定义事件

无论是鼠标点击事件，还是通过.trigger('click')执行点击都是执行缓存对象中的handle()函数。