事件

什么是事件

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

事件的使用方式

1、在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

view id="tapTest" data-hi="WeChat" bindtap="tapName" Click me! /view

2、在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({  tapName: function(event) {    console.log(event)  }})

3、可以看到log出来的信息大致如下：

{    "type":"tap",    "timeStamp":895,    "target": {      "id": "tapTest",      "dataset":  {        "hi":"WeChat"      }    },    "currentTarget":  {      "id": "tapTest",      "dataset": {        "hi":"WeChat"      }    },    "detail": {      "x":53,      "y":14    },    "touches":[{      "identifier":0,      "pageX":53,      "pageY":14,      "clientX":53,      "clientY":14    }],    "changedTouches":[{      "identifier":0,      "pageX":53,      "pageY":14,      "clientX":53,      "clientY":14    }]}

事件详解

事件分类

事件分为冒泡事件和非冒泡事件：

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

WXML的冒泡事件列表：

事件绑定和冒泡

事件绑定的写法同组件的属性，以 key、value 的形式。

1. key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0
   起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
2. value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

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

事件对象

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

BaseEvent 基础事件对象属性列表：

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：    

 

特殊事件： canvas/ 中的触摸事件不可冒泡，所以没有 currentTarget。

type

代表事件的类型。

timeStamp

页面打开到触发事件所经过的毫秒数。

target

触发事件的源组件。

currentTarget

事件绑定的当前组件。

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

dataset

自定义数据

示例：

view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap" DataSet Test /viewPage({  bindViewTap:function(event){    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写  }})

touches

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

Touch 对象

CanvasTouch 对象

changedTouches

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

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。