24.微信小程序（事件对象-绑定、冒泡、捕获）

偏执的太偏执、 2023-06-18 04:00 14阅读 0赞

# 微信小程序（事件对象-绑定、冒泡、捕获） #

# 组件 #

原生组件  
小程序中的部分组件是由客户端创建的原生组件，包含：  
①camera  
②canvas  
③input（仅在focus时表现为原生组件）  
④map  
⑤textarea  
⑥video

# 事件冒泡 #

事件触发验证  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
事件冒泡验证  
点击子级蓝色区域  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
验证后发现事件发生冒泡，点击子级时，除了触发子级事件，还会冒泡到父级，触发父级绑定的事件

事件冒泡验证  
点击父级红色区域  
![在这里插入图片描述][2019113009091166.png]  
点击父级红色区域时，只会触发父级绑定的事件

target和currentTarget 属性的区别：  
event.target返回触发事件的元素  
event.currentTarget返回绑定事件的元素

例如：事件冒泡到父级时  
![在这里插入图片描述][20191130090924564.png]

触发事件源头为child，然后冒泡至parent，所以event.target为触发事件的元素，event.currentTarget为绑定事件的元素。

target和currentTarget 属性区别：

通俗理解：  
currentTarget为当前事件所绑定的组件  
target是触发该事件的源头组件

# 事件对象 #

当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，对象的详细属性如下，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

事件对象event  
![在这里插入图片描述][20191130090954927.png]

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

事件对象event

changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。  
![在这里插入图片描述][20191130091006247.png]

事件对象event

![在这里插入图片描述][20191130091015287.png]  
![在这里插入图片描述][20191130091014297.png]

事件对象event

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

事件对象event之dataset注意项：  
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。  
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；  
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype

# 事件冒泡 #

阻止冒泡：  
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡  
案例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

使用catch事件绑定后，此时点击蓝色子区域时，便不会再冒泡至父级区域

# 事件捕获 #

事件流包含事件冒泡与捕获，通过bind绑定会发生冒泡，catch则会阻止冒泡传播。自基础库版本 1.5.0 起，触摸类事件开始支持捕获阶段。

接下来介绍下事件捕获，首先要明确几点  
①捕获阶段位于冒泡阶段之前  
②绑定语法capture-bind、capture-catch

接下来简单测试下

![在这里插入图片描述][20191130091112322.png]

此时，再次点击子区域时触发顺序为右侧所示，  
由此可以验证出捕获优先级高于冒泡。  
注意：捕获阶段要求bind和catch后紧跟一个冒号，如bind:tap、catch:touchstart

# 总结 #

事件绑定、冒泡、捕获总结  
（1）原生组件  
（2）事件冒泡  
（3）事件对象  
（4）事件捕获

# 如有问题或者疑问请留言练习小编！！！！！ #

# 感谢来访！！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191130090837203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191130090851627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[2019113009091166.png]: https://img-blog.csdnimg.cn/2019113009091166.png
[20191130090924564.png]: https://img-blog.csdnimg.cn/20191130090924564.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191130090946560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191130090954927.png]: https://img-blog.csdnimg.cn/20191130090954927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191130090957765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191130091006247.png]: https://img-blog.csdnimg.cn/20191130091006247.png
[20191130091015287.png]: https://img-blog.csdnimg.cn/20191130091015287.png
[20191130091014297.png]: https://img-blog.csdnimg.cn/20191130091014297.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019113009102673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191130091050779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191130091112322.png]: https://img-blog.csdnimg.cn/20191130091112322.png