微信小程序的事件系统

一、事件简介

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

二、事件绑定

/*
在组件中绑定一个事件处理函数;
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
bindtap 与 bind:tap是等价的。
*/
<button bindtap="handTap">按钮</button>
<button bind:tap="handTap">按钮</button>
//在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
  handTap(){
	console.log("按钮被点击了");
  }
})

三、事件分类

事件分为冒泡事件和非冒泡事件：
1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

//普通事件绑定使用bind，绑定并阻止冒泡事件使用catch
/*
点击 inner view 会先后调用handleTap3和handleTap2；
(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，
点击 middle view 会触发handleTap2；点击 outer view 会触发handleTap1。
*/
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

四、事件的捕获阶段

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

//在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

//如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

五、事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

<button id="mybutton" data-username="zhangsan" data-password="123456" bind:tap="handTap">按钮</button>

Page({
  handTap(event){
  	//事件对象
    console.log(event);
    //target是触发事件的源组件
    console.log(event.target);
    //currentTarget是绑定事件的组件
    console.log(event.currentTarget);
    //源组件的id值
    console.log(event.target.id);
    //dataset是事件源组件上由data-开头的自定义属性组成的集合
    console.log(event.target.dataset.username);
    console.log(event.target.dataset.password);
  }
})

事件介绍的官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html