网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript事件委托技术实例分析

JavaScript事件委托技术实例分析

作者:kooky798  发布时间:2023-07-01 01:18:23 

标签:JavaScript,事件,委托

本文实例分析了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程序设计有所帮助。

0
投稿

猜你喜欢

  • 对于数据库管理员来说,可以经常想了解一些之前未听说过的存储过程,特别是无文档类型的存储过程。或许是用这些存储过程,能够简化日常的数据管理。为
  • /*Bresenham画圆算法*/var arc = function(x0,y0,r){/*起点坐标x0,y
  • 本文探讨了提高MySQL 数据库性能的思路,并从8个方面给出了具体的解决方法。1、选取最适用的字段属性MySQL可以很好的支持大数据量的存取
  • 阅读上一篇:垂直栅格与渐进式行距(上) 新问题来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了
  • 实验目的:验证主动释放内存变量是否有价值. 实验原始代码: <script language=vbscript runat=serve
  • * 惯,请先看测试页面:event-test.html 结论:在非IE浏览器,同一元素同一事件类型的处理函数是先进先出的。只有IE下,是先进
  • 下面这段代码,你知道有哪些错误吗:var g_bar = "bar";function foo(container, c
  • 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
  • 很多朋友使用Dreamweaver一段时间后,开始热衷于寻找各式各样的插件,追求各种各样的特效,而对于Dreamweaver中的基本功能反而
  • 对于PHP的逐渐流行,我们有目共睹:无论是BLOG程序中的WordPress,还是CMS程序中的DEDECMS,还是BBS程序中的Discu
  • 创意404页面的文章我们似乎已经出过两篇了,今天hongkiat又带来了60个创意404页面.相关404页面设计文章:国外404错误页面的创
  • 在许多用SQL Server实现的新的企业系统设计中,系统设计师需要在给数据结构和管理应用程序逻辑的定位上做出具有关键性意义的决定。SQL
  • Asp中Server.ScriptTimeOut属性需要注意的一点Server.ScriptTimeout?这个属性给定Asp脚本执行的最大
  • Array(数组)内部机制在 Go 语言中数组是固定长度的数据类型,它包含相同类型的连续的元素,这些元素可以是内建类型,像数字和字符串,也可
  • [前言]:搭往公司的班车,遇到其他部门的同事,他问了很多关于我的工作的问题,由此引发这篇文章。这些问题,我也经常被其他人问到,其中既有我们亲
  • 今天呱呱发了一个网址给我看,大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢,以前在网上看过用锚点做的这类的效果。脑袋
  • JavaScript中有很多内部属性和方法,在大多数情况下,只有JavaScript引擎才可以访问,但不论什么都是有特例的,在这里就是指Mo
  • YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。仔细研
  • 问题Go语言在编译时不会将配置文件这类第三方文件打包进二进制文件中它既受当前路径的影响,也会因所填写的不同而改变,并非是绝对可靠的解决命令行
  • 也许有人会说我火星了,但我的确是第一次知道,欢迎我从火星归来吧。在 Yahoo! 首页上隐藏着这样一个小秘密,大家到 www.yahoo.c
手机版 网络编程 asp之家 www.aspxhome.com