12. 事件

更多事件请参考： https://www.w3cschool.cn/weixinapp/weixinapp-w5lp38rv.html

事件的使用方式

使用bind + 事件名，如 ：

<button bindtap="tapName"> Click me! </button>

Page({
  tapName(event) {
    console.log(event);
  }
})

小程序的事件列表：

tips ：自基础库版本 1.5.0 起，在大多数组件和自定义组件中， bind 后可以紧跟一个冒号，其含义不变，如 bind:tap 。基础库版本 2.8.1 起，在所有组件中开始提供这个支持。

更多关于事件的详细描述，请参考 ： https://www.w3cschool.cn/weixinapp/weixinapp-w5lp38rv.html

阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，

点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view bind:tap="handleTap1">
  outer view
  <view catch:tap="handleTap2">
    middle view
    <view bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

互斥事件绑定

自基础库版本 2.8.2 起，除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

例如在下边这个例子中，点击 inner view 只会调用 handleTap3，点击 middle view 只会调用 handleTap2 ， 点击 outer view 只会调用 handleTap1 。

<view mut-bind:tap="handleTap1">
  outer view
  <view mut-bind:tap="handleTap2">
    middle view
    <view mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

用字符串名绑定事件

<view bind:tap="{{ handlerName }}">
    Click here!
</view>

Page({
  data: {
    handlerName: "tab" // 这里的名字需要和下面的函数名一致 
  },
  tab() {
    console.log(123);
  }
})

此时，页面的 this.data.handlerName 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。（和jquery的自定义属性一个意思）

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。

如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；

data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype ；

例子：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})