JavaScript事件委托技术实例分析


Posted in Javascript onFebruary 06, 2015

本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下:

如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.

首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.

其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.

事件委托:

对事件处理程序过多的问题解决的方案就是事件委托技术.

事件委托技术利用了事件冒泡.只需指定一个事件处理程序.

我们可以为某个需要触发事件的父元素来绑定事件处理程序.

<ul id="mylist">    
  <li id="li_1">sdsdsd</li>    
  <li id="li_2">sdsdsd</li>    
  <li id="li_3">sdsdsd</li>
</ul>

现在我们要为这3个li绑定事件处理程序..

只需要在ul绑定事件处理程序.

obj.eventHandler($("mylist"),"click",function(e){
  e = e || window.event;
  switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
 case "li_1":
 alert("li_1");
 break;
 case "li_2":
 alert("li_2");
 break;
 case "li_3":
 alert("li_3");
 break
  }
})

如果在一个复杂的web应用程序中,.这种事件委托是非常实用的.

如果不采用这种方式的话,一个一个去绑定那就是数不清的事件处理程序.

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
理解javascript闭包
Dec 15 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
JavaScript比较两个对象是否相等的方法
Feb 06 #Javascript
JavaScript 异常处理 详解
Feb 06 #Javascript
jquery中change()用法实例分析
Feb 06 #Javascript
javaScript的函数对象的声明详解
Feb 06 #Javascript
javascript实用方法总结
Feb 06 #Javascript
javascript实现限制上传文件大小
Feb 06 #Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python如何对齐字符串
2020/07/30 Python
python 实现性别识别
2020/11/21 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
会计职业生涯规划范文
2014/01/04 职场文书
黄河象教学反思
2014/02/10 职场文书
增员口号大全
2014/06/18 职场文书
公司门卫工作职责
2014/06/28 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
营销计划书
2015/01/17 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python