前端Jeek

微信小程序事件绑定

2022/2/13 小程序

🌙 事件绑定

🌙 1. 什么是小程序事件绑定？

事件就是用户的一些操作行为，如长按，点击，拖动，触摸屏幕等，都是事件。专业的讲，如下：

  1. 事件是视图层到逻辑层的通讯方式。
  2. 事件可以将用户的行为反馈到逻辑层进行处理。
  3. 事件可以绑定在组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数。
  4. 事件分为：冒泡事件 和 非冒泡事件，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
  5. 事件对象可以携带额外信息，如id, dataset, touches。

🌙 2. 小程序事件都有哪些？

  • 点击事件 tap：手指触摸后马上离开
  • 长按事件 longtap：手指触摸后，超过350ms再离开
  • 触摸事件
    • touchstart 手指触摸动作开始
    • touchend 手指触摸动作结束
    • touchmove 手指触摸后移动
    • touchcancel 手指触摸动作被打断，如：来电提醒、弹框
  • 其他事件，如：submit，input...

🌙 3. 小程序事件绑定如何传递参数？

属性 类型 说明
type (opens new window) String 事件类型
timeStamp (opens new window) Integer 事件生成时的时间戳
target (opens new window) Object 触发事件的组件的一些属性值集合
currentTarget (opens new window) Object 当前组件的一些属性值集合

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。书写方式：以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。

<button 
  data-alpha-beta="1" 
  data-alphaBeta="2" 
  bindtap="bindViewTap"
  style="margin-top:40rpx;"> 点击事件测试 </button>

<view class="info">
  事件类型是：{{eventTag.type}}
</view>

<view class="info">
  传递参数 alphaBeta ：{{eventTag.target.dataset.alphaBeta}}
</view>

<view class="info">
  传递参数 alphabeta ：{{eventTag.target.dataset.alphabeta}}
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
  data:{
    eventTag:{}
  },
  bindViewTap:function(event){
    this.setData({
      eventTag: event
    })
    console.log(event)
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

🌙 4.冒泡事件和捕获事件

  • 冒泡事件：当一个组件上的时间被触发后，该事件会向父节点传递
  • 捕获事件：当一个组件上的时间被触发后，该事件不会向父节点传递
<view>
  <view bindtap="clickp1">
    <button bindtap="clickc1">冒泡事件点击</button>
  </view>
  <view bindtap="clickp2">
    <button catchtap="clickc2">捕获事件点击</button>
  </view>
</view>
1
2
3
4
5
6
7
8

// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
console.log('app', app.globalData);
Page({
  data: {},
  clickc1() {
    console.log('冒泡事件点击点击：c1');
  },
  clickc2() {
    console.log('捕获事件点击点击: c1');
  },
  clickp1() {
    console.log('冒泡事件点击点击：p1');
  },
  clickp2() {
    console.log('冒泡事件点击点击：p1');
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

分别点击，结果:

冒泡事件点击点击：c1
冒泡事件点击点击：p1
捕获事件点击点击: c1
1
2
3
  • bind开头: 冒泡事件，会传递给上层事件监听
  • catch开头: 捕获事件，不会传递给上层事件监听

微信小程序组件