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

最新推荐文章于 2025-06-16 11:12:26 发布

原创最新推荐文章于 2025-06-16 11:12:26 发布 · 428 阅读

CC 4.0 BY-SA版权

29 篇文章

订阅专栏

本文深入探讨小程序中的原生组件特性，包括camera、canvas、input等，并详细解析事件冒泡与捕获机制，以及如何利用事件对象进行精确的事件处理。

原生组件

小程序中的部分组件是由客户端创建的原生组件，包含：

<view id="parent" bindtap="parentFn">
  <view id="child" bindtap="childFn"></view>
</view>

#parent{
  width: 200rpx;
  height: 200rpx;
  background-color: #ff5857;
}
#child{
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
}

/**父级触发 */
parentFn(event){
  console.log(event);
},
/**子级触发 */
childFn(event){
  console.log(event);
},

在这里插入图片描述

点击子级蓝色区域：
在这里插入图片描述

验证后发现事件发生冒泡，点击子级时，除了触发子级事件，还会冒泡到父级，触发父级绑定的事件

点击父级红色区域：
在这里插入图片描述

点击父级红色区域时，只会触发父级绑定的事件

例如：事件冒泡到父级时，触发事件源头为child，然后冒泡至parent，所以event.target为触发事件的元素，event.currentTarget为绑定事件的元素。

当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，对象的详细属性如下：

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

Touch对象：

属性	类型	说明
identifier	Number	触摸点的标识符
pageX,pageY	Number	距离文档左上角的距离，文档的左上角为原点，横轴为X轴，纵轴为Y轴
clientX.clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

changedTouches 数据格式同 touches。表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

属性	类型	说明
id	String	事件源组件的id
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合

属性	类型	说明
id	String	事件源组件的id
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：
data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

<view id="parent" bindtap="parentFn">
  <view id="child" catchtap="childFn"></view>
</view>

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

简单测试一下：

<view id="parent" bind:tap="fn1" capture-bind:tap="fn2">
  <view id="child" bind:tap="fn3" capture-bind:tap="fn4"></view>
</view>

fn1(){
console.log("fn1");
},
fn2() {
  console.log("fn2");
},
fn3() {
  console.log("fn3");
},
fn4() {
  console.log("fn4");
},

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