微信小程序框架wxml（五）wxml事件

1.事件定义

· 事件是视图层到逻辑层的通讯方式。

· 事件可以将用户的行为反馈到逻辑层进行处理。

· 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

· 事件对象可以携带额外信息，如id，dataset，touches。

2.举例事件的使用方法。

（1）首先在wxml的组件中为button绑定一个事件处理函数

<button id="button0" bindtap="wannaMore" data-hello='hello world' data-index="0">跳转到更多示例</button>

（2）在js文件中定义wannaMore函数

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

（3）在控制台查看输出信息，可以看到data-hello和data-index都在dataset进行展示，且省略了data-字段。

3.事件分类

绑定事件处理函数可以由“catch”或“bind”连接事件类型，两者之间的区别是catch会阻止事件向上冒泡，bind不会阻止事件向上冒泡。绑定后在page中定义同名函数，否则会报错。

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

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

（2）非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。（除了上述说明的事件类型为冒泡时间外，其余均为非冒泡事件）。

（3）demo

①wxml中三个view组件 outer到inner依次包裹

<view id="outer" bindtap="handtap">  outer view  <view id="middle" catchtap="handtap">    middle view    <view id="inner" bindtap="handtap">      inner view    </view>  </view></view>

②在js中定义handtap方法。（在该例中三个view都绑定了同一函数，可以绑定三个不同的函数）

Page({  handtap:function(message){    console.log(message.currentTarget.id + " is clicked!")  }})

③点击inner view，查看控制台输出，冒泡事件到middle view后没有继续向上冒泡。

4.事件对象

一般来说，组件触发事件时，逻辑层（js文件中）绑定该事件的处理函数会收到一个事件对象。

（1）BaseEvent基础事件对象属性列表

属性类型说明typeString事件类型timeStampInteger事件生成时的时间戳targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合①type代表事件的类型，详见3（1）

②timeStamp从该page打开到触发该事件所经过的毫秒数。

③target 触发事件的源组件。（其中：dataset在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成elementType。
）

属性类型说明idString事件源组件的idtagNameString当前组件的类型datasetObject事件源组件上由data-开头的自定义属性组成的集合

④currentTarget事件绑定的当前组件

属性类型说明idString当前组件的idtagNameString当前组件的类型datasetObject当前组件上由data-开头的自定义属性组成的集合

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

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

属性类型说明touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件，当前变化的触摸点信息的数组①Touch对象

属性类型说明identifierNumber触摸点的标识符pageX, pageYNumber距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴clientX, clientYNumber距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

（4）特殊事件 ，cavans组件中的触摸事件不可冒泡，所以没有currentTarget属性

CanvasTouch 对象

属性类型说明特殊说明identifierNumber触摸点的标识符 x, yNumber距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴