|
|
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ì)象是否存在。這不管是從代碼效率還是代碼文件大小的方面來(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.jb51.NET/jiaoben/28044.html
JavaScript技術(shù)：jQuery 通過(guò)事件委派一次綁定多種事件，以減少事件冗余，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
