百度智能小程序 事件處理

事件提供了一種可以將用戶的行為從視圖層反饋到邏輯層進行處理的通訊方式。觸發(fā)綁定在組件上的事件的時候，就會執(zhí)行邏輯層中對應的事件處理函數(shù)，同時也可以傳遞數(shù)據(jù)，例如 id，dataset 等。

事件示例

目標：在組件中綁定一個事件處理函數(shù) bindtap 。

模板：

<view id="swanTap" data-say="hello" bindtap="tapHandle"> 點擊 </view>

定義事件的處理函數(shù)：

Page({
    tapHandle(e) {
        swan.showToast(e.currentTarget.dataset.say);
    }
});

效果：當用戶單擊組件時，顯示："hello"。

事件的分類

與瀏覽器的 DOM 事件類似，智能小程序的視圖中事件分為冒泡事件和非冒泡事件。

• 冒泡事件指的是當組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞；
• 非冒泡事件指的是當組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞；
• 原生組件video、live-player、canvas、cover-view、cover-image等從基礎庫1.12.0開始支持冒泡。

冒泡事件如下表，不在列表的事件均為非冒泡事件。

事件綁定和冒泡

事件綁定在組件上，與屬性的寫法相同（以 key、value 的形式）。

• key 以 bind 或 catch 開頭，銜接事件類型，例如 bindtap、catchtouchcancel。也可以在 bind 和 catch 后可以緊跟一個冒號，如 bind:tap、catch:touchstart，其功能不變。
• bind 與 catch 的區(qū)別是 bind 事件綁定不會阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡；
• value 對應的是在 Page 中定義同名的函數(shù)，否則在事件觸發(fā)時執(zhí)行函數(shù)會拋出異常。

代碼示例

<view id="wrap" bindtap="handleTap1">
    wrap
    <view id="module" catchtap="handleTap2">
        module
        <view id="text" bindtap="handleTap3">
            text
        </view>
    </view>
</view>

效果：

• 用戶單擊 text 會先后調用 handleTap3 和 handleTap2。這是因為 tap 事件冒泡到了 module，而 module 阻止了 tap 事件冒泡，不再向父節(jié)點傳遞；
• 用戶單擊 module 會觸發(fā) handleTap2；
• 用戶單擊 wrap 會觸發(fā) handleTap1。

事件的捕獲

捕獲階段是位于冒泡階段之前，在捕獲階段中，事件到達節(jié)點的順序與冒泡階段恰好相反。在捕獲階段監(jiān)聽的方式是采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段。

代碼示例：capture-bind

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

效果：

• 用戶單擊 text 會先后調用 handleTap2、handleTap4、handleTap3、handleTap1。

代碼示例：capture-catch

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

效果：

• 用戶單擊 text 只會調用 handleTap2。

事件對象

默認當組件觸發(fā)事件時，邏輯層綁定事件的處理函數(shù)會收到一個默認參數(shù)，即事件對象。

下面是事件對象詳細屬性列表：

代碼示例 ： 

在開發(fā)者工具中打開

<view id="outer" catchtap="handleTap">
    <view id="inner">點擊我</view>
</view>

下面是事件對象的屬性為屬性值集合時的詳細信息。這里需要注意的是 target 和 currentTarget 的區(qū)別,currentTarget 為當前事件所綁定的組件，而 target 則是觸發(fā)該事件的源頭組件。

target

currentTarget

detail

是自定義事件所攜帶的數(shù)據(jù)。

dataset

在組件的事件被觸發(fā)時，也可以傳遞自定義的數(shù)據(jù)。書寫方式： 以 data- 開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)，最終的 - 在 dataset 中會將連字符轉成駝峰式寫法。如組件上data-car-color屬性值的讀取方式是: event.currentTarget.dataset.carColor。

touch

changedTouch

數(shù)據(jù)格式同 touches，指的是有變化的觸摸點，如 touchstart（開始），touchmove（變化），touchend，touchcancel（結束）等。

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