百度智能小程序 事件處理

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

事件示例

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

模板：

<view id="swanTap" data-say="hello" bindtap="tapHandle"> 點(diǎn)擊 </view>

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

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

效果：當(dāng)用戶(hù)單擊組件時(shí)，顯示："hello"。

事件的分類(lèi)

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

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

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

事件綁定和冒泡

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

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

代碼示例

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

效果：

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

事件的捕獲

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

代碼示例：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>

效果：

• 用戶(hù)單擊 text 會(huì)先后調(diào)用 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>

效果：

• 用戶(hù)單擊 text 只會(huì)調(diào)用 handleTap2。

事件對(duì)象

默認(rèn)當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定事件的處理函數(shù)會(huì)收到一個(gè)默認(rèn)參數(shù)，即事件對(duì)象。

下面是事件對(duì)象詳細(xì)屬性列表：

代碼示例 ： 

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

<view id="outer" catchtap="handleTap">
    <view id="inner">點(diǎn)擊我</view>
</view>

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

target

currentTarget

detail

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

dataset

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

touch

changedTouch

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

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