快捷導(dǎo)航

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

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

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

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

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

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

您可能感興趣的文章: