jQuery 事件处理：深入理解 jQuery.fn[name] 定义

以下代码片段展示了 jQuery 如何优雅地处理事件绑定：

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

	// 处理事件绑定
	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 );
	}
} );

这段代码做了以下几件事：

1. 定义常见事件类型: 代码首先定义了一个字符串，其中包含常见的事件类型，例如 'click', 'mouseover', 'submit' 等。
2. 循环绑定事件: 使用 jQuery.each 方法遍历这些事件类型。
3. 创建 jQuery 方法: 对于每个事件类型，代码都创建了一个对应的 jQuery 方法，例如 $(element).click()。
4. 处理事件绑定和触发: 新创建的方法内部使用 this.on() 进行事件绑定，使用 this.trigger() 触发事件。
5. 扩展 jQuery 功能: 使用 jQuery.fn.extend 添加了 hover 方法，方便开发者处理鼠标进入和离开事件。

这段代码的核心在于其简洁性和可扩展性。通过循环遍历事件类型，jQuery 可以用极少的代码处理大量的事件绑定逻辑。同时，使用 jQuery.fn.extend 可以方便地扩展 jQuery 的功能，添加自定义方法。