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调用WebService的示例
Apr 07 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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中,文件上传
2006/12/06 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
安装dbus-python的简要教程
2015/05/05 Python
python中的错误处理
2016/04/10 Python
python文件读写代码实例
2019/10/21 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
关于numpy数组轴的使用详解
2019/12/05 Python
keras 多任务多loss实例
2020/06/22 Python
python字典的值可以修改吗
2020/06/29 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
上海中网科技笔试题
2012/02/19 面试题
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
小学生环保演讲稿
2014/04/25 职场文书
《悯农》教学反思
2014/04/28 职场文书
小学生常见病防治方案
2014/06/06 职场文书
经营场所使用证明
2015/06/19 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers