JavaScript事件委托技术实例分析
更新时间：2015年02月06日 10:01:04 作者：kooky798
这篇文章主要介绍了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程序设计有所帮助。
相关文章
这篇文章介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了JavaScript数组和循环详解,本文讲解了循环遍历数组、按顺序存储和访问值、以相反的顺序存储和访问值、在数组中搜索等内容,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了原生javascript实现百叶窗效果的方法及原理介绍，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了JS内部事件机制之单线程原理，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
本文主要介绍了原生JS实现诏书卷轴展开效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了关于Javascript闭包典型应用,文中有非常详细的代码示例.对正在学习js的伙伴们有很好的帮助,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了小程序实现下拉列表框菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Javascript 调用 ActionScript 的简单方法
在Flex中，ActionScript调用Javascript是比较简单的，说白了就是，在html里，怎么调用Javascript，在ActionScript就怎么调用就可以了。接下来通过本文给大家介绍js 调用 actionscript方法，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了微信公众号生成新浪短网址的实现(快速生成)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
关于css应用。以前一直认为css就是做布局样式，只能表现页面，跟交互是没关系的。事实上也基本不会往那边想。2010-07-07
最新评论