小程序开发之视图层WXML绑定事件

事件

什么是事件

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

事件的使用方式

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

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

例如：
index.html

<view id="tapTest" data-hi="WeChat" bindtap="tapName">点击事件</view>

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

index.js

tapName(event) {
    console.log(event)
 },

log日志出来的信息大致如下：

{
  "type": "tap",            //事件类型
  "timeStamp": 895,         //事件生成时的时间戳
  "target": {               //触发事件的组件的一些属性值集合(触发事件的源组件)
    "id": "tapTest",        //事件源组件的id
    "dataset": {            //事件源组件上由data-开头的自定义属性组成的集合
      "hi": "WeChat"       
    }
  },
  "currentTarget": {        //当前组件的一些属性值集合
    "id": "tapTest",        //当前组件的id
    "dataset": {            //当前组件上由data-开头的自定义属性组成的集合
      "hi": "WeChat"
    }
  },
  "detail": {               //自定义事件所携带的数据
    "x": 53,
    "y": 14
  },
  "touches": [              //touches 是一个数组，表示当前停留在屏幕上的触摸点。
    {
      "identifier": 0,      //触摸点的标识符
      "pageX": 53,          //文档的左上角为原点 ，横向为X轴，纵向为Y轴
      "pageY": 14,
      "clientX": 53,        //距离可显示区域（除去导航条）左上角距离，横X轴&#x