javascript使用事件委托
2024-08-21 22:38:31
事件委托是javascript中一个很重要的概念,其基本思路就是利用了事件冒泡的机制,给上级(父级)元素触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托。即使是各个dom对象所触发的事件不同的时候,也可以通过事件委托,利用switch语句按需绑定事件,可以帮助我们减少大量的DOM绑定带来的内存开销。
从事件冒泡时开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件。这也是类似 SproutCore(http://www.sproutcore.com/)这种框架所使用的技术,用来减少应用中的事件监听的数量 :
list.addEventListener("click", function(e){
if (e.currentTarget.tagName == "li") {
/* ... */
return false;
}
}, false);
jQuery 的处理方式更妙,只需给 delegate() 函数传入子元素的选择器、事件类型和回调函数即可。如果使用事件绑定的话,就会给每一个 l i 元素都绑定 click 事件,然而使用 delegate() 方法就能减少这种事件监听的数量,改善代码性能 :
$("ul li").click(function(){ /* ... */ }); // 不要这样做,这样会给每个 li 元素都添加事件监听(非常浪费)
$("ul").delegate("li", "click", /* ... */); // 这样只会添加一个事件监听
使用事件委托的另一个好处是,所有为元素动态添加的子元素都具有事件监听。因此,在上面的例子中,在页面载入完成后添加的 li 节点同样可以触发点击事件的回调。
最新文章
- Android 从零开始打造异步处理框架
- JS定义函数的两种方式:函数声明和函数表达式
- Elasticsearch集群管理
- dede去掉当前位置position后面的箭头
- 编译fdk-aac for ios
- 省市县distpicker的使用
- css position 定位
- Morse Clock
- [置顶] 玩转Eclipse — 自动注释插件JAutodoc
- Shell的学习就从重装系统开始吧
- 2102: [Usaco2010 Dec]The Trough Game
- vue视频学习笔记01
- Linux环境g++编译TinyXML动态库
- Log4j扩展使用--输出地Appender
- Cocos2D实现RPG队伍菜单任意调整角色顺序的效果
- 12.1、Libgdx的图像之持续性和非持续性渲染
- ERP-非财务人员的财务培训教(五)------资本结构筹划
- Android--MediaRecorder录音录像
- [转] jquery作者John Resig编写的微模板引擎:JavaScript Micro-Templating
- history.go(-1)和History.back()的区别
热门文章
- Istio如何使用相同的端口访问网格外服务
- @Param注解的用法解析
- Final发布 文案+美工展示
- Alpha Version Release Of Teamwork: Appendix 1 BUG BASH
- SSR &; Next.js &; Nuxt.js
- Java对象与Map间相互转换
- 模拟事件【JavaScript高级程序设计第三版】
- 一本通1635【例 5】Strange Way to Express Integers
- Several ports (8005, 8080, 8009) required by Tomcat
- mininet invalid literal for int() with base 10: 'cpu.cfs_period_us:'