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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
了解javascript中的Dom操作
May 27 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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
CodeIgniter安全相关设置汇总
2014/07/03 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python实用代码片段收集贴
2015/06/03 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
淘宝客服专员岗位职责
2014/04/11 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
七一党日活动总结
2014/07/08 职场文书
小学工作总结2015
2015/05/04 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书