网站首页 > 技术教程 正文
好程序员web前端培训分享kbone高级-事件系统:1、用法
kbone 里节点事件没有直接复用小程序的捕获冒泡事件体系,原因在于:
小程序事件和 Web 事件不完全对齐,比如 input 事件在小程序里是不冒泡的。
小程序自定义组件是基于 Web Components 的概念设计的,对于跨自定义组件的情况,无法准确获取事件的源节点。
故在 kbone 里的节点事件是在源节点里监听到后,就直接在 kbone 仿造出的 dom 树中进行捕获冒泡。此处使用的事件绑定方式均采用 bindxxx 的方式,故在小程序中最初监听到的事件一定是在源节点监听到的。比如用户触摸屏幕后,会触发 touchstart 事件,在节点 a 上监听到 touchstart 事件后,后续监听到同一行为触发的 touchstart 均会被抛弃,后续的捕获冒泡阶段会在仿造 dom 树中进行。
目前除了内置组件特有的事件外(比如图片的 load 事件),普通节点只有 touchstart、touchmove、touchend、touchcancel 和 tap 会被监听,其中 tap 会被转化为 cick 事件来触发。
因为此处事件监听方式默认是 bindxxx,但是对于一些特殊场景可能需要使用小程序的 capture-bind:xxx(比如无法在源节点监听到事件的场景)、catchxxx(比如需要阻止触摸引起滚动的场景) 和动画事件的情况,对于此可以使用特殊节点 wx-capture、wx-catch 和 wx-animation:
</wx-capture>
</wx-catch>
</wx-animation>
其中 wx-capture 和 wx-catch 节点上面绑定的 touchstart、touchmove、touchend、touchcancel 和 tap 五个事件会被使用 capture-bind:xxx 和 catchxxx 的方式监听,脱离了 kbone 的事件捕获冒泡体系,所以只会在此节点单独触发。
PS:这三种特殊节点的内部实现和内置组件一致,故书写方式和样式处理均可参考内置组件的使用方案。
- 上一篇: Web前端培训:干货都在这里,拿走不谢!
- 下一篇: 四川 川软成都WEB培训内容(川软官网)
猜你喜欢
- 2024-11-01 好程序员web前端培训JavaScript学习笔记--jQuery
- 2024-11-01 web前端培训课程有哪些?(web前端培训课程有哪些内容)
- 2024-11-01 2022web前端培训学习过程中需要掌握哪些技术点
- 2024-11-01 北京线下web前端培训班如何做到快速学好web前端开发技术
- 2024-11-01 web前端培训需要多少时间(web前端培训最好的机构)
- 2024-11-01 零基础学web前端要不要上培训班(学好web前端要多久)
- 2024-11-01 web前端开发培训要多久?web前端框架有哪些?
- 2024-11-01 好程序员web前端培训分享怎样学好css?
- 2024-11-01 四川 川软成都WEB培训内容(川软官网)
- 2024-11-01 Web前端培训:干货都在这里,拿走不谢!
你 发表评论:
欢迎- 最近发表
-
- linux日志文件的管理、备份及日志服务器的搭建
- Linux下挂载windows的共享目录操作方法
- Linux系统中的备份文件命令(linux系统中的备份文件命令有哪些)
- 麒麟KYLINOS|通过不同方法设置用户访问文件及目录权限
- 「Linux笔记」系统目录结构(linux目录的结构及含义)
- linux中修改归属权chown命令和chgrp命令
- 工作日报 2021.10.27 Android-SEAndroid权限问题指南
- Windows和Linux环境下,修改Ollama的模型默认保存路径
- 如何强制用户在 Linux 上下次登录时更改密码?
- 如何删除Linux文件夹中除某些扩展名之外的所有文件?
- 标签列表
-
- 下划线是什么 (87)
- 精美网站 (58)
- qq登录界面 (90)
- nginx 命令 (82)
- nginx .http (73)
- nginx lua (70)
- nginx 重定向 (68)
- Nginx超时 (65)
- nginx 监控 (57)
- odbc (59)
- rar密码破解工具 (62)
- annotation (71)
- 红黑树 (57)
- 智力题 (62)
- php空间申请 (61)
- 按键精灵 注册码 (69)
- 软件测试报告 (59)
- ntcreatefile (64)
- 闪动文字 (56)
- guid (66)
- abap (63)
- mpeg 2 (65)
- column (63)
- dreamweaver教程 (57)
- excel行列转换 (56)
本文暂时没有评论,来添加一个吧(●'◡'●)