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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
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扩展” 的解决方法
2007/04/16 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php简单实现MVC
2015/02/05 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PDO::errorCode讲解
2019/01/28 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
js简单时间比较的方法
2016/08/02 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Shell如何接收变量输入
2012/09/24 面试题
法制宣传月活动总结
2014/04/29 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
湘江北去观后感
2015/06/15 职场文书
给学校的建议书400字
2015/09/14 职场文书