事件

数据绑定部分讲了，对象状态发生变化，通知页面更新视图元素的单向数据流向。html

一旦用户操做或者数据更新引发数据变化，视图须要同步更新。就须要用到事件传递了。视图上的数据都必须用过事件传递给对象，只有用户操做视图，才能获取到数据，并更新对象状态。调用this.setData（）方法实现视图的部分渲染。前端

• 视图A因为用户操做，触发事件A 。
• 事件A处理函数中，更新对象A和对象B的状态。
• 因为对象A和B状态变化，通知视图A和B更新。

事件的使用方式

<!-- index.wxml --> <view bindtap="changeText" data-hi="wechat" id="tapTest"> {{ message }} </view> 

index.js:
Page({
 data: { message: 'Hello MINA!' }, changeText: function(e){ console.log(e) this.setData({ message:'changed data' }) } }) 

事件分类

事件分为冒泡事件和非冒泡事件：小程序

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：缓存

事件绑定与冒泡

图：事件冒泡与捕获架构

事件绑定的写法以 key、value 的形式。函数

• key 以bind或catch开头，而后跟上事件的类型，如bindtap、catchtouchstart。
• value 是一个字符串，须要在对应的 Page 中定义同名的函数。否则当触发事件的时候会报错。

<view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3">inner view</view> </view> </view> 

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定能够阻止冒泡事件向上冒泡。post

事件的捕获阶段

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

在下面的代码中，点击 inner view 会前后调用handleTap二、handleTap四、handleTap三、handleTap1。ui

<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。this

<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>

----------------------------------------

小程序系列：

  前言

  项目结构

  生命周期

  请求与封装

  数据绑定

  事件

  基础使用： component使用 、 wxs使用 、 节点操做 、 页面跳转 、 缓存

  前端架构浅谈

----------------------------------------