在项目中使用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 , 围观地址: https://beginor.github.io/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· .NET中 泛型 + 依赖注入 的实现与应用