在项目中使用HTMLDom的事件冒泡机制
在项目中,经常要创建如下如所示的控件,在一个DIV中,动态的生成一些多选框或者单选框,让用户选择,从而激发事件,使页面上其它的控件作根据用户的选择做出相应。
这种控件很常见,也比较容易实现,通常的实现方式可能是先在页面中创建一个DIV,然后再给DIV添加选项,给每个选项都添加事件处理函数,左图的HTML代码为
对应的JavaScript代码为
通常情况下,这种方法没有什么问题,但是如果选项很多,而且选项会变化的情况下,上面的实现方式就有些麻烦了,当选项由1、2、3、4变化为5、6、7、8时,则需要将1、2、3、4的事件处理函数删除,再为新选项5、6、7、8添加事件处理函数,而且懒惰的程序员总是忘记把1、2、3、4的事件处理函数删除,从而造成许多不可预测的(内存泄漏、性能等)问题。
通过运用HTMLDom的事件冒泡机制,可以比较巧妙的解决这类问题。看下面的代码,
上面的代码只为Panel的body(也就是id为container的DIV)注册了click事件,根据Dom的事件冒泡机制,点击div内部的所有元素,都会激发click事件,这样我们只要根据处理函数的第二个参数el进行判断一下,就可以做相应的处理了。
这样做还有个优点,就是div的内容动态更新时,不需要维护那些checkbox的事件处理函数,因为没有给他们注册任何事件。
另外,Ext.Container也有类似的bubble和cascade函数,顾名思义,bubble向上冒泡,cascade向下扩散。
如果在实际的项目中恰当的能够运用这些技巧,可以为简化类似的任务。
张志敏所有文章遵循创作共用版权协议,要求署名、非商业 、保持一致。在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处。
本博客已经迁移到 GitHub , 围观地址: http://beginor.github.io/
在项目中使用HTMLDom的事件冒泡机制相关推荐
- IOS中的事件响应链,事件冒泡机制基本了解
本文主要讲解IOS中事件响应链,即事件冒泡机制.做过web开发的同学应该知道js事件冒泡是从主响应元素一层一层的向父级冒泡事件,在ios亦是如此,但是不同是ios中,如果冒泡链中有一方对事件进行响应处 ...
- JS事件冒泡机制以及委托方法,以及vue中的stop
要理解事件冒泡机制,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型:鼠标键盘事件.页面事件.表单相关事件. 鼠标键盘事件:o ...
- 事件冒泡机制和如何阻止冒泡
一.事件冒泡 在浏览器客户端应用平台,基本上都是以事件驱动的,就是说去执行某个事件,然后做出相应的操作. 事件冒泡就是在事件开始时,由最具体的元素(文档中最底层的那个节点)接受,然后逐级向上传播到最不 ...
- angularJS中,怎么阻止事件冒泡
今天有个童鞋问我,ng怎么阻止事件冒泡,我就简单的贴一下代码吧,也不是什么好高大上的问题 转载于:https://www.cnblogs.com/leoshuaige/p/6910646.html
- JQuery事件----冒泡机制的思考
当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件. <div class="div_xiaozi"> <span class="spa ...
- JS——事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可 ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- Knative Eventing 中如何实现 Registry 事件注册机制
背景 作为事件消费者,之前是无法事先知道哪些事件可以被消费,如果能通过某种方式获得哪些 Broker 提供哪些事件,那么事件消费者就能很方便通过这些 Broker 消费事件.Registry 就是在这 ...
- 什么是事件冒泡机制?
什么是 事件冒泡? 冒泡的机制: 这气泡就相当于我们的事件,鱼就是事件源,而水则相当于我们的整个dom树:事件从dom 树的底层 层层往上传递,直至传递到dom的根节点. 栗子 : 样式布局 代码结构 ...
- as3.0中如何阻止事件冒泡?
as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mo ...
最新文章
- php 整形 字符串排序,php-通过特定的字符串值进行排序
- vue 过滤器 格式时间秒数,js 时间日期格式化
- MongoDB最佳实践(转)
- 记得收藏这12个爆款 Java 开源项目!【附源码】
- SqlServer中使用游标进行双重遍历
- Cookie的简单理解和使用
- python数据解析-re、xpath选择器的使用
- 如何启用计算机睡眠功能,台式机睡眠如何开启
- python实现两个word文档对比
- 小程序 40163_微信小程序请求openid错误码40163
- 判断距离1970年1月1日的天数
- (附源码)ssm通用数据展示系统 毕业设计200934
- mysql链路追踪工具_Molten
- HTML实现在线代码格式化、美化、加密、解密、压缩、一键转JavaScript功能工具-toolfk程序员工具网
- gmssl国密sm2(生成密钥对-私钥签字-证书验签)
- 穷举算法——奶牛碑文(cow)
- java .net 加密解密,【汉字加密解密】一个16进制,可用于.net与java接口加密、解密...
- P2P之关资金存管(二)模式
- 培训班学java学到什么程度可以出去工作了?
- 学术文献翻译改写 F36(含心得)