|
|
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 通过事件委派一次绑定多种事件，以减少事件冗余，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
