小程序 事件处理

事件绑定

• 文档地址
• https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3
• 小程序的事件绑定需要注意以下几点：

1. 小程序的事件绑定是通过标签的属性来完成的（与vue、react一致）
2. 通过属性绑定事件其有两种写法
	- 绑定冒泡事件（不会帮我们阻止冒泡）【主要】
		- 语法：bind事件类型="方法名"	
		- 方法名不能加括号，而且不能传参
	- 绑定非冒泡事件（会帮我们阻止冒泡）
		- 语法：catch事件类型="方法名"
		- 方法名不能加括号，而且不能传参
3. 上述语法还支持在属性名中间加上“:”写法，例如：
	- bind:事件类型
	- catch:事件类型
	- 自基础版本库2.8.1以后所有的事件都支持加“:”写法
4. 特别需要注意，事件类型有可能其名称与之前大不同，例如以前的点击事件类型名字是`click`，在这里点击事件其实就是手指触摸事件，官网规定触摸事件是`tap`。

事件对象

• 当组件触发事件时，逻辑层绑定该事件的处理方法会收到一个事件对象。通过此对象来进行小程序的自定义事件参数据传递。
• 事件对象在小程序中是非常有意义的，这点与vue和react不同。在小程序中，事件对象是给事件处理程序传递参数的唯一方式。
• BaseEvent基础事件对象属性列表：

属性	类型	说明
type	String	事件类型
timeStamp	**Integer	页面打开到触发事件所经过的毫秒数。
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

• target属性与currentTarget，在部分场景下是一样的，当然也存在不一样的情况。

1. 如果事件依附的这个组件（标签）不存在子组件（标签）并且子有属性的时候，两者一样
2. 如果事件依附的这个组件（标签）存在子组件（标签）并且子有属性的时候，则两者不一样
3. 如果以后要获取事件自身的组件（标签）的数据的时候，得使用currentTarget。

• 在小程序中，如果希望在视图结构中通过事件给事件对象传递参数，则可以在标签上使用data-数据名=“数据值”的形式传递

案例分析

• 目录结构：

• bindevent.wxml文件代码

<!--miniprogram/pages/bindevent/bindevent.wxml-->

<!-- 
  注意点：
  1. 事件绑定也是通过属性进行操作，与前端基本一致
  2. 事件绑定支持冒泡事件和非冒泡事件绑定
    冒泡事件：bind事件类型=“处理程序名”
    非冒泡事件：catch事件类型=“处理程序名”
  3. 自基础库2.8.1开始，支持在bind和catch后紧跟冒号“:”用于分割其与事件类型（可选）
  4. 小程序事件与之前的js事件类型名称存在天壤之别，没有一个是一样的，具体请看文档
  5. 事件的处理程序在写的时候不能加括号，不能加参数传递（参数怎么传递后续再说）
  6. 事件处理程序可以接收唯一的形参：事件对象（可选）
  7. 小程序的参数需要通过特定的属性进行传递，“data-参数名="参数值"”
 -->

<!-- 绑定点击事件（触摸事件）：tap -->
 <view bindtap="tapHandler" data-id="11">
   <view data-name="lisi">点我查看</view>
 </view>

<!-- 触摸开始事件和触摸结束事件 -->
<view bindtouchstart="start" bindtouchend="end">
  点击蓄力
</view>

• bindevent.js文件代码

// miniprogram/pages/bindevent/bindevent.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    time: 0
  },
  /*
    tap事件处理程序
  */ 
 tapHandler:function(e){
  console.log("该标签被点击了");
  /*
    e中有几个基础常用的属性
    type：事件类型
    timeStamp：时间戳，自事件绑定好，到触发事件时经历过的时间，单位毫秒
    请额外注意：在特定的情况下（事件依附的标签没子元素的时候），以下两个属性的值是一样的。以下两个属性都有dataset的属性，该属性是用于获取标签传递个事件处理程序的参数集合（也是事件处理程序获取参数的唯一方式）
    target：获取子元素的相关信息，取子的参数
    currentTarget：获取事件绑定标签自己的相关信息（不包含子）
  */ 
 console.log(e.target.dataset.name);
 console.log(e.currentTarget.dataset.id);
 },
   /*
    蓄力开始：touchstart
  */ 
 start:function(){
  // 获取当前的时间并记录
  let now = Date.now();
  this.setData({
      time: now
  })
  console.log('吟唱中.....');
 },
  /*
    蓄力结束：touchend
  */ 
 end:function(){
    let diffTime = Date.now() - this.data.time;
    console.log('本次蓄力耗时' + diffTime + '毫秒');
    console.log('技能发动完毕，cd：30s');
 }
})

• 点击查看控制台打印结果

• 点击蓄力的控制台打印结果