事件

什么是事件

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

事件分类

touchstart        手指触摸动作开始
touchmove         手指触摸后移动
touchcancel       手指触摸动作被打断，如来电提醒，弹窗
touchend          手指触摸动作结束
bindtap           手指触摸后马上离开
longpress         手指触摸后，超过350ms再离开,如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

事件对象的属性列表

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e）来接收

type             String         事件类型
timeStamp        Integer        页面打开到触发事件所经过的毫秒数
target           Object         触发事件的组件的一些属性值集合
currentTarget    Object         当前组件的一些属性值集合
detail           Object         额外的信息
touches          Array          触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches   Array          触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别

e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

bindtap

通过 bindtap，可以为组件绑定 tap 触摸事件
<button type="primary" bindtap="btnHandler">按钮</button>

btnHandler(e){
    console.log(e)
}
// 通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值
Page({
  data: {
     count:1
  },
  btnHandler(e){
    console.log(e)
    this.setData({
      count:this.data.count+1
    })
  }
 }）

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数

<button 
type="primary" 
bindtap="btnHandler" 
data-info="{{123}}"
>按钮</button>

// info 会被解析为参数的名字数值 2 会被解析为参数的值

在事件处理函数中，通过 event.target.dataset.参数名即可获取到具体参数的值

 btnHandler(e){
    //  dataset是一个对象，包含了所有通过data-* 传递过来的参数项
    console.log(e.target.dataset)
    // 通过dataset可以访问到具体参数的值
    console.log(e.target.dataset.info)
  }

bindInput语法

在小程序中，通过 input 事件来响应文本框的输入事件

通过 bindinput，可以为文本框绑定输入事件
<input type="text" bindinput="btnHandler"/>
在页面的 .js 文件中定义事件处理函数

btnHandler(e){
    // e.detail.value  是变化过后，文本框最新的值
    console.log(e.detail.value)
}

实现数据同步