浅谈事件委托(事件代理)和事件冒泡
来源:互联网 发布:网络报警中心电话号码 编辑:程序博客网 时间:2024/06/11 20:23
事件冒泡:子级元素的某个事件被触发,它的上级元素的该事件也被递归触发。
事件委托:使用了事件冒泡的原理,从触发某事件的元素开始,递归地向上级元素传播事件。
事件委托的优点:
1) 对于要大量处理的元素,不必为每个元素都绑定事件,只需要在它们的父元素上绑定一次即可,提高性能。
2) 可以处理动态插入DOM中的元素,对动态插入DOM中的元素进行直接绑定是不行的。
关于事件委托有一个问题:事件委托给父元素后,如何得知事件是哪个子元素触发的?
答:可以通过event.target对象来获取。
<!DOCTYPE HTML><html><head><title></title></head><body><div class="button-group"><button type="button" class="btn" id="btn1">提交</button><button type="button" class="btn" id="btn2">提交</button><button type="button" class="btn" id="btn3">提交</button></div> <script src = "js/jquery-1.8.2.min.js"></script><script> $(".button-group").on('click', function(e) {event.srcElement ? alert(event.srcElement.id) : alert(event.targete.target.id);});</script> </body></html>
事件代理的应用实例请见:http://blog.csdn.net/zhouziyu2011/article/details/70198984
jQuery为事件委托提供了bind()、live()、delegate()、on()、off()、one()方法。
对这些方法的介绍详见:http://blog.csdn.net/zhouziyu2011/article/details/53945994
1 0
- 浅谈事件委托(事件代理)和事件冒泡
- 浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托
- 事件代理和事件委托
- 事件委托和事件代理
- 浅谈Javascript事件委托(代理)
- 事件冒泡、事件捕获、默认事件与事件代理(委托)
- JavaScript事件冒泡和事件委托
- js事件冒泡和事件委托
- js事件冒泡和委托
- 关于JS事件冒泡与JS事件代理(事件委托)
- 浅谈委托和事件(个人理解)
- 浅谈C#委托和事件
- 浅谈C#委托和事件
- c#的委托(代理)和事件
- JavaScript事件代理和委托(Delegation)
- JavaScript事件代理和委托(Delegation)
- c#的委托(代理)和事件
- JavaScript事件代理和委托(Delegation)
- MySQL命令行导出导入数据(windows和Linux)
- Java进阶---重载和复写
- 四、java枚举
- 1014. 福尔摩斯的约会
- 总结5条对学习Linux系统有帮助的经验心得
- 浅谈事件委托(事件代理)和事件冒泡
- 使用bugly做应用升级时android 7.0上遇到的问题
- MongoDB3.0新版本几点介绍
- http2.0 的优势
- 分布式锁的几种实现方式~
- python+openresty+uwsgi+django环境搭建
- 前端路由实现与 react-router 源码分析
- String StringBuffer StringBuilder区别
- 京东2016实习生招聘 系统测试工程师 笔试错题笔记(170306)