jQuery 通过事件委派一次绑定多种事件，以减少事件冗余

更新时间：2010年06月30日 12:54:39 作者：

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

您可能感兴趣的文章:

jQuery实现模仿微博下拉滚动条加载数据效果
这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下
2015-12-12
广泛收集的jQuery拖放插件集合
jQuery允许您创造时尚而又用户体验友好的网站，不仅看起来悦目，而且他轻量级的大小负荷使网站响应相当迅速。这是jQuery在Web开发领域如此受重视的原因
2012-04-04
使用JQuery选择HTML遍历函数的方法
下面小编就为大家带来一篇使用JQuery选择HTML遍历函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
浅谈jQuery animate easing的具体使用方法(推荐)
下面小编就为大家带来一篇浅谈jQuery animate easing的具体使用方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
jquery实现Ctrl+Enter提交表单的方法
这篇文章主要介绍了jquery实现Ctrl+Enter提交表单的方法,涉及jquery针对键盘按键的响应与表单操作相关技巧,非常简单实用,需要的朋友可以参考下
2015-07-07
jQuery中:focus选择器用法实例
这篇文章主要介绍了jQuery中:focus选择器用法,以实例形式分析了:focus选择器的功能、定义及匹配获取焦点元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
浅谈 jQuery 事件源码定位问题
在一个不是自己写的页面上，如何快速定位到他绑定的事件代码在哪,下面为大家简单的介绍下,需要的朋友可以参考下
2014-06-06
Jquery实现弹出层分享微博插件具备动画效果
此Jquery插件是一款非常实用的特效，不但有分享功能，还具备了动画效果，提高了用户体验，感兴趣的朋友可以参考下哈
2013-04-04
前端分页功能的实现以及原理（jQuery）
本文主要介绍了基于jQuery实现的前端分页功能，并分析了其实现原理。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
jQuery解析XML 详解及方法总结
这篇文章主要介绍了jQuery解析XML 实例详解的相关资料,需要的朋友可以参考下
2016-09-09