微信小程序~事件綁定和冒泡

【1】事件綁定和冒泡javascript

事件綁定的寫法同組件的屬性，以 key、value 的形式。html

key 以bind或catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，在非原生組件中，bind和catch後能夠緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。
value 是一個字符串，須要在對應的 Page 中定義同名的函數。否則當觸發事件的時候會報錯。

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。java

事件冒泡及阻止冒泡案例：canvas

如在下邊這個例子中，點擊 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>

【2】事件捕獲ide

自基礎庫版本 1.5.0 起，觸摸類事件支持捕獲階段。捕獲階段位於冒泡階段以前，且在捕獲階段中，事件到達節點的順序與冒泡階段剛好相反。須要在捕獲階段監聽事件時，能夠採用capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。函數

在下面的代碼中，點擊 inner view 會前後調用handleTap2、handleTap4、handleTap3、handleTap1。url

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view>
</view>

若是將上面代碼中的第一個capture-bind改成capture-catch，將只觸發handleTap2。spa

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view>
</view>

事件對象

如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。.net

BaseEvent 基礎事件對象屬性列表：

屬性	類型	說明	基礎庫版本
type	String	事件類型
timeStamp	Integer	事件生成時的時間戳
target	Object	觸發事件的組件的一些屬性值集合
currentTarget	Object	當前組件的一些屬性值集合
mark	Object	事件標記數據	2.7.1

CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）：

屬性	類型	說明
detail	Object	額外的信息

TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：

屬性	類型	說明
touches	Array	觸摸事件，當前停留在屏幕中的觸摸點信息的數組
changedTouches	Array	觸摸事件，當前變化的觸摸點信息的數組

特殊事件： canvas 中的觸摸事件不可冒泡，因此沒有 currentTarget。

type

表明事件的類型。

timeStamp

頁面打開到觸發事件所通過的毫秒數。

target

觸發事件的源組件。

屬性	類型	說明
id	String	事件源組件的id
dataset	Object	事件源組件上由`data-`開頭的自定義屬性組成的集合

currentTarget

事件綁定的當前組件。

屬性	類型	說明
id	String	當前組件的id
dataset	Object	當前組件上由`data-`開頭的自定義屬性組成的集合

說明： target 和 currentTarget 能夠參考上例中，點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

dataset

在組件節點中能夠附加一些自定義數據。這樣，在事件中能夠獲取這些自定義的節點數據，用於事件的邏輯處理。

在 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 // 大寫會轉爲小寫 } })

mark

在基礎庫版本 2.7.1 以上，可使用 mark 來識別具體觸發事件的 target 節點。此外， mark 還能夠用於承載一些自定義數據（相似於 dataset ）。

當事件觸發時，事件冒泡路徑上全部的 mark 會被合併，並返回給事件回調函數。（即便事件不是冒泡事件，也會 mark 。）

代碼示例：

<view mark:myMark="last" bindtap="bindViewTap"> <button mark:anotherMark="leaf" bindtap="bindButtonTap">按鈕</button> </view>

在上述 WXML 中，若是按鈕被點擊，將觸發 bindViewTap 和 bindButtonTap 兩個事件，事件攜帶的 event.mark將包含 myMark 和 anotherMark 兩項。

Page({ bindViewTap: function(e) { e.mark.myMark === "last" // true e.mark.anotherMark === "leaf" // true } })

mark 和 dataset 很類似，主要區別在於： mark 會包含從觸發事件的節點到根節點上全部的 mark: 屬性值；而 dataset 僅包含一個節點的 data- 屬性值。

細節注意事項：

若是存在同名的 mark ，父節點的 mark 會被子節點覆蓋。
在自定義組件中接收事件時， mark 不包含自定義組件外的節點的 mark 。
不一樣於 dataset ，節點的 mark 不會作連字符和大小寫轉換。

touches

touches 是一個數組，每一個元素爲一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。表示當前停留在屏幕上的觸摸點。

Touch 對象

屬性	類型	說明
identifier	Number	觸摸點的標識符
pageX, pageY	Number	距離文檔左上角的距離，文檔的左上角爲原點，橫向爲X軸，縱向爲Y軸
clientX, clientY	Number	距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向爲X軸，縱向爲Y軸

CanvasTouch 對象

屬性	類型	說明	特殊說明
identifier	Number	觸摸點的標識符
x, y	Number	距離 Canvas 左上角的距離，Canvas 的左上角爲原點，橫向爲X軸，縱向爲Y軸

changedTouches

changedTouches 數據格式同 touches。表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

detail

自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。

點擊事件的detail 帶有的 x, y 同 pageX, pageY 表明距離文檔左上角的距離。