微信小程序开发(八) - 事件 - wxml 的触发

事件

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

事件的使用方式

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

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

    <button id="Test" bindtap='tap'>clickbutton>

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

var tap ={
  tap:function(event){
    console.log(event)
  }
}
Page(tap)

事件分类

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

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

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

WXML的冒泡事件列表：

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件
如

的submit事件，的input事件，的scroll事件

事件绑定和冒泡

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

key

以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。

自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。

value

为一个字符串，需要在对应的Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中
点击inner view会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bind:tap="handleTap1">
  outer view
  <view id="middle" catch:tap="handleTap2">
    middle view
    <view id="inner" bind:tap="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 基础事件对象属性列表：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳(页面打开 到 触发事件所经过的毫秒数)
target	Object	触发事件的 源组件 的一些属性值集合
currentTarget	Object	获取 事件当前 绑定的 组件的一些属性值
CustomEvent		自定义事件对象属性列表（继承 BaseEvent）：

属性	类型	说明
detail	Object	额外的信息
TouchEvent		触摸事件对象属性列表（继承 BaseEvent）

注 : detail 自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息

属性	类型	说明
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

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