1.關鍵字 bindtap，catchtap，mut-bind
<!-- bindtap，catchtap，mut-bind 互換-->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
tapName: function () {
console.log("我被點擊了")
},
2.事件分類
事件分爲冒泡事件和非冒泡事件：
- 冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
- 非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
WXML的冒泡事件列表：
| 類型 | 觸發條件 | 最低版本 |
|---|---|---|
| touchstart | 手指觸摸動作開始 | |
| touchmove | 手指觸摸後移動 | |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 | |
| touchend | 手指觸摸動作結束 | |
| tap | 手指觸摸後馬上離開 | |
| longpress | 手指觸摸後，超過350ms再離開，如果指定了事件回調函數並觸發了這個事件，tap事件將不被觸發 | 1.5.0 |
| longtap | 手指觸摸後，超過350ms再離開（推薦使用longpress事件代替） | |
| transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發 | |
| animationstart | 會在一個 WXSS animation 動畫開始時觸發 | |
| animationiteration | 會在一個 WXSS animation 一次迭代結束時觸發 | |
| animationend | 會在一個 WXSS animation 動畫完成時觸發 | |
| touchforcechange | 在支持 3D Touch 的 iPhone 設備，重按時會觸發 | 1.9.90 |
注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(詳見各個組件)
3.普通事件綁定
事件綁定的寫法類似於組件的屬性，如：
<view bindtap="handleTap">
Click here!
</view>
如果用戶點擊這個 view ，則頁面的 handleTap 會被調用。
事件綁定函數可以是一個數據綁定，如：
<view bindtap="{{ handlerName }}">
Click here!
</view>
4.綁定並阻止事件冒泡
除 bind 外，也可以用 catch 來綁定事件。與 bind 不同， catch 會阻止事件向上冒泡。
例如在下邊這個例子中，點擊 inner view 會先後調用handleTap3和handleTap2(因爲tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點擊 middle view 會觸發handleTap2，點擊 outer view 會觸發handleTap1。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
測試一下就明白了
5.互斥事件綁定
自基礎庫版本 2.8.2 起，除 bind 和 catch 外，還可以使用 mut-bind 來綁定事件。一個 mut-bind 觸發後，如果事件冒泡到其他節點上，其他節點上的 mut-bind 綁定函數不會被觸發，但 bind 綁定函數和 catch 綁定函數依舊會被觸發。
換而言之，所有 mut-bind 是“互斥”的，只會有其中一個綁定函數被觸發。同時，它完全不影響 bind 和 catch 的綁定效果。
例如在下邊這個例子中，點擊 inner view 會先後調用 handleTap3 和 handleTap2 ，點擊 middle view 會調用 handleTap2 和 handleTap1 。
<view id="outer" mut-bind:tap="handleTap1">
outer view
<view id="middle" bindtap="handleTap2">
middle view
<view id="inner" mut-bind:tap="handleTap3">
inner view
</view>
</view>
</view>
6. data-* 屬性
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相應的Page定義中寫上相應的事件處理函數，參數是event。
Page({
tapName: function(event) {
console.log(event)
}
})
可以看到log出來的信息大致如下：
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}