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读取中文COOKIE的解决办法
Feb 15 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
JS数组方法join()用法实例分析
Jan 18 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日期时间函数的高级应用技巧
2009/05/16 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
微信自定义分享php代码分析
2016/11/24 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
常见的python正则用法实例讲解
2016/06/21 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python绘制立方体的方法
2018/07/02 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
详解Python描述符的工作原理
2021/06/11 Python