微信小程序入门四：视图层事件

一、事件机制

在微信官方定义的事件概念如下：

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

1.1 事件绑定

在wxml的标签中进行事件绑定主要有两种方式：bind+事件名 或者 touch+事件名
1）、bind
bind+事件名可以绑定一个事件处理函数，函数传入参数即为事件对象
示例

<view id="tapTest" data-say="hello" bindtap="showMe"> 点击输出 view>

如上，通过bindtap，绑定一个触摸点击事件，tap为小程序封装的一个事件名
在Page函数的参数中，定义对应的事件响应函数
id，dataset，touches是事件对象携带的信息

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

这里的事件对象是小程序包装过的对象，其中常用的是currentTarget属性，输出如下：

"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"hello"
  }
},
"touches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],

说明：
dataset中存放了在标签中通过data-自定的属性值 key即为data-中*定义的内容，value即为对应的值
touches:中存放了事件触发的具体信息

1.2 catch

catch+事件名 ：是绑定事件的另一种方法

<view id="target1" catchTap="handleTap1">触摸事件view>

    Page({
        handleTap1:function(e){
            console.log(e)
        }
    })

1.3 catch和bind的区别

二者都用于绑定事件，但bind不能阻止事件冒泡，而catch方法可以阻止事件冒泡
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
冒泡事件：touchstart,touchmove,touchcancel,touchend,tap,longtap

1.4 事件对象

    Page({
        handleTap1:function(e){
            console.log(e)
        }
    })

如上：打印出的事件对象具有多个属性
type:事件类型，timeStamp：事件时间戳，target：事件源 currentTarget:事件绑定的组件