快捷導(dǎo)航

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

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

jQuery的最大特色之一就是方法連綴寫(xiě)法，這樣的書(shū)寫(xiě)方式使得閱讀起來(lái)更加方便。

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

復(fù)制代碼代碼如下:

 
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行多次地使用了同樣的一段代碼去判斷事件對(duì)象是否存在。這不管是從代碼效率還是代碼文件大小的方面來(lái)說(shuō)都是不合理的方法。
2.事件委派：一次性綁定多個(gè)事件，根據(jù)事件類別委派相應(yīng)的操作
為了更好地優(yōu)化上面的代碼，可以通過(guò)事件委派來(lái)修改代碼，修改后的代碼如下：

復(fù)制代碼代碼如下:

 
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; 
}; 
}; 
}); 
}); 

該段代碼中一次性地將多個(gè)事件綁定到一個(gè)待處理的DOM對(duì)象之上，在代碼的內(nèi)部通過(guò)判斷事件的類別來(lái)委派不同的處理代碼。這樣可以避免代碼的重復(fù)定義，以達(dá)到避免時(shí)間冗余的效果。
以上兩種代碼的執(zhí)行后的效果是完全一樣的，相信大家一眼就可以看中哪一種代碼的執(zhí)行效率更加的快速吧！
演示地址 http://demo.jb51.net/js/event_delegation/index.html
打包下載 http://www.dbjr.com.cn/jiaoben/28044.html

您可能感興趣的文章: