jQuery事件委派一次綁定多種事件

jQuery的最大特色之一就是方法連綴寫法，這樣的書寫方式使得閱讀起來更加方便。於是乎，在日常的開發中大量使用連綴寫法，而事件方法連綴就是一個特例。若給一個Dom對象使用了綁定了多個事件，便於閱讀和書寫，習慣了使用連綴寫法，但這樣的書寫方式會造成時間的冗餘。

1.事件冗餘：多個事件方法中多次調用相同的代碼

下面的代碼是一個事件方法連綴的寫法：

jQuery(function($) {
	$('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
	$('#mytable').bind('mouseover', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			var link = $link[0];
			tipTitle = link.title;
			link.title = '';
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			})
			.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
		};
	}).bind('mouseout', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			$link.attr('title', tipTitle);
			$('#livetip').hide();
		};
	}).bind('mousemove', function(event) {
		var $link = $(event.target).closest('a');
		if ( $link.length) {
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			});
		};
	});
});

其中第5|6行、第18|19行、第24|25行多次地使用了同樣的一段代碼去判斷事件對象是否存在。這不管是從代碼效率還是代碼文件大小的方面來說都是不合理的方法。

2.事件委派：一次性綁定多個事件，根據事件類別委派相應的操作

爲了更好地優化上面的代碼，可以通過事件委派來修改代碼，修改後的代碼如下：

jQuery(function($) {
	var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
 
	$('#mytable').bind('mouseover mouseout mousemove', function(event) {
	  var $link = $(event.target).closest('a');
	  if (!$link.length) { return; }
	  var link = $link[0];
 
	  if (event.type == 'mouseover' || event.type == 'mousemove') {
		$liveTip.css({
		  top: event.pageY + 12,
		  left: event.pageX + 12
		});
	  };
 
	  if (event.type == 'mouseover') {
		tipTitle = link.title;
		link.title = '';
		$liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
	  };
 
	  if (event.type == 'mouseout') {
		$liveTip.hide();
		if (tipTitle) {
			link.title = tipTitle;
		};
	  };
	});
});

該段代碼中一次性地將多個事件綁定到一個待處理的DOM對象之上，在代碼的內部通過判斷事件的類別來委派不同的處理代碼。這樣可以避免代碼的重複定義，以達到避免時間冗餘的效果。