|
|
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對象之上，在代碼的內部通過判斷事件的類別來委派不同的處理代碼。這樣可以避免代碼的重復定義，以達到避免時間冗余的效果。
以上兩種代碼的執行后的效果是完全一樣的，相信大家一眼就可以看中哪一種代碼的執行效率更加的快速吧！
演示地址 http://demo.jb51.NET/js/event_delegation/index.html
打包下載 http://www.jb51.NET/jiaoben/28044.html
JavaScript技術：jQuery 通過事件委派一次綁定多種事件，以減少事件冗余，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
