jQuery 通过事件委派一次绑定多种事件，以减少事件冗余
作者：
jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。
于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。
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
打包下载 https://www.jb51.net/jiaoben/28044.html
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
打包下载 https://www.jb51.net/jiaoben/28044.html