jQuery 通過事件委派一次綁定多種事件，以減少事件冗余

更新時間：2010年06月30日 12:54:39 作者：

jQuery的最大特色之一就是方法連綴寫法，這樣的書寫方式使得閱讀起來更加方便。

于是乎，在日常的開發(fā)中大量使用連綴寫法，而事件方法連綴就是一個特例。若給一個Dom對象使用了綁定了多個事件，便于閱讀和書寫，習慣了使用連綴寫法，但這樣的書寫方式會造成時間的冗余。
1.事件冗余：多個事件方法中多次調(diào)用相同的代碼
下面的代碼是一個事件方法連綴的寫法：

復制代碼代碼如下:

 
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.事件委派：一次性綁定多個事件，根據(jù)事件類別委派相應的操作
為了更好地優(yōu)化上面的代碼，可以通過事件委派來修改代碼，修改后的代碼如下：

復制代碼代碼如下:

 
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對象之上，在代碼的內(nèi)部通過判斷事件的類別來委派不同的處理代碼。這樣可以避免代碼的重復定義，以達到避免時間冗余的效果。
以上兩種代碼的執(zhí)行后的效果是完全一樣的，相信大家一眼就可以看中哪一種代碼的執(zhí)行效率更加的快速吧！
演示地址 http://demo.jb51.net/js/event_delegation/index.html
打包下載 http://www.dbjr.com.cn/jiaoben/28044.html

您可能感興趣的文章: