事件绑定

简单的点击事件:

<view>{{counter}}</view>
<button size="mini" bindtap="handleIncrease">+</button>
<button size="mini" bindtap="handleDecrease">-</button>

handleIncrease(){
  this.setData({
    counter: this.data.counter + 1
  })
},
handleDecrease(){
  this.setData({
    counter: this.data.counter - 1
  })
}

有的组件有自己特有的事件，比如input或者scroll-view
input有bindinput，bindfocus，bindblur
scroll-view有bindscrolltpwrapper，bindscrolltolower

所有组件都有的事件：

事件	触发条件
touchstart	手指触摸动作开始
touchmove	手指滑动
touchcancel	手指触摸被打断（比如来电了）
touchend	手指触摸结束
tap	点击事件
longpress	长按，超过350毫秒，并且这个和tap不能同时触发，只会执行一个

点击一下，会触发touchstart，tap，touchend
长按会触发：touchstart，longpress，touchend
这俩是不能同时触发到的。

bindtap与catchtap都表示点击，他俩的区别是：

• bindtap是冒泡的，catchtap是非冒泡的。

举个例子：

<view 
    class="container"
    bind:touchstart="handleTouchStart"
    bind:touchmove="hendleTouchMove"
    bind:touchcancel="handleTouchCancel"
    bind:touchend="handleTouchEnd"
    bind:tap="handleTap"
    bind:longpress="handleLongpress"
></view>
handleTouchStart(){
  console.log("touchStart");
},
handleTouchMove(){
  console.log("touchMove");
},
handleTouchCancel(){
  console.log("touchCancel");
},
handleTouchEnd(){
  console.log("touchEnd");
},
handleTap(){
  console.log("tap");
},
handleLongpress(){
  console.log("longpress");
},

事件对象

当某个组件触发了一个事件的时候，就会产生一个事件对象（event），这个事件对象有很多属性。这个事件对象会被传入到回调函数中。

事件对象的属性	属性值	描述
type	tap/touchstart...
currentTarget
target
detail	x,y	鼠标点击的位置
timestapes		从页面打开到我触发事件经过了多长时间
changedTouches
touches

touches和changedTouches的区别：
touches：记录了有几个手指在屏幕上触摸了
changedTouches：记录手指的变化，有几个手指发生了变化。

在什么时候能看到他们的区别：

• touchend的时候，touches里边为0，没有手指触摸了。changedTouches不为0，因为有手指改变了
• 多个手指触摸时，不同。

target和currentTarget的区别：

• target：指向的是触发事件的元素
• currentTarget：指向的是捕获事件的元素(也就是元素自身)

举个例子：
获取事件对象：

<button bind:tap="handleClick">点击获取事件对象</button>
handleClick(event){
  console.log(event);
},

事件的传递参数

比如我想给点击事件传递一个参数，应该怎么做：

通过data-的形式传递参数

<!-- 事件传递参数，传递index和item -->
<block wx:for="{{titles}}" wx:key="{{index}}">
  <view 
    bind:tap="handleClickTitle"
    data-index="{{index}}"
    data-item="{{item}}"
  >{{item}}</view>
</block>
// 获取传递过来的参数
handleClickTitle(event){
  console.log(event)
  const dataset = event.currentTarget.dataset;
  const index = dataset.index;
  const item = dataset.item;
  console.log(index, item);
}

事件捕获和事件冒泡

当组件产生一个事件的时候，事件分了事件捕获和事件冒泡。这和原生的是一样的。

顺序是：先捕获后冒泡，先从外往里再往外。

会一层层传递：bind
捕获：capture-bind:tap
冒泡：bind:tap

不会一层层传递，阻止事件的进一步传递：catch
就是阻止冒泡和阻止捕获（后续都被阻止掉了）
捕获：capture-catch:tap
冒泡：catch:tap