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


Posted in Javascript onJune 30, 2010

于是乎,在日常的开发中大量使用连缀写法,而事件方法连缀就是一个特例。若给一个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.3water.com/js/event_delegation/index.html
打包下载 https://3water.com/jiaoben/28044.html
Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 #Javascript
基于jquery的图片懒加载js
Jun 30 #Javascript
CSS和Javascript简单复习资料
Jun 29 #Javascript
javascript与CSS复习(三)
Jun 29 #Javascript
javascript与CSS复习(二)
Jun 29 #Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 #Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 #Javascript
You might like
php下获取http状态的实现代码
2014/05/09 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS作用域链详解
2017/06/26 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
JS实现炫酷轮播图
2020/11/15 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
会计自我鉴定
2013/11/02 职场文书
销售总监岗位职责
2014/01/04 职场文书
质量月活动策划方案
2014/03/10 职场文书
市场开发计划书
2014/05/07 职场文书
计生专干事迹
2014/05/28 职场文书
高考励志标语
2014/06/05 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
改造DE1103三步曲
2022/04/07 无线电
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android