事件是視圖層到邏輯層的通訊方式

【實踐所得】

<script>

import wepy from 'wepy'

import api from '../api/api'

export default class schoolQA extends wepy.page {

config = {

navigationBarTitleText: '學校問答'

}

data = {

nav: {

bar: ['問答投放', '問答清單'],

currentTab: 0

},

radioItems: [{

name: 7,

value: '7天'

}, {

name: 25,

value: '25天'

name: 30,

value: '30天'

}],

apiRes: {},

notHere: {},

input: {}

restVal() {

this.apiRes = {}

<input type="search" class="weui-search-bar__input" placeholder="請輸入關鍵詞" value="{{input.question}}" name="keyword" maxlength="30" auto-focus @input="getQARecommenderQ" />

通過

this.input={}

this.apiRes={}

來置空輸入資料，重置頁面

this.apiRes,this.input 作用可以認為是事件資料線

事件

事件是視圖層到邏輯層的通訊方式。

事件可以将使用者的行為回報到邏輯層進行處理。

事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

事件對象可以攜帶額外資訊，如 id, dataset, touches。

在元件中綁定一個事件處理函數。

如​<code>​bindtap​</code>​，當使用者點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函數。

在相應的Page定義中寫上相應的事件處理函數，參數是event。

可以看到log出來的資訊大緻如下：

事件分為冒泡事件和非冒泡事件：

冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。

非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。

WXML的冒泡事件清單：

<col>

類型

觸發條件

最低版本

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​​

注：除上表之外的其他元件自定義事件如無特殊聲明都是非冒泡事件，如​​&lt;form/&gt;​​的​<code>​submit​</code>​事件，​​&lt;input/&gt;​​的​<code>​input​</code>​事件，​​&lt;scroll-view/&gt;​​的​<code>​scroll​</code>​事件，(詳見各個​​元件​​)

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

key 以​<code>​bind​</code>​或​<code>​catch​</code>​開頭，然後跟上事件的類型，如​<code>​bindtap​</code>​、​<code>​catchtouchstart​</code>​。自基礎庫版本 ​​1.5.0​​ 起，在非​​原生元件​​中，​<code>​bind​</code>​和​<code>​catch​</code>​後可以緊跟一個冒号，其含義不變，如​<code>​bind:tap​</code>​、​<code>​catch:touchstart​</code>​。

value 是一個字元串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。

​<code>​bind​</code>​事件綁定不會阻止冒泡事件向上冒泡，​<code>​catch​</code>​事件綁定可以阻止冒泡事件向上冒泡。

如在下邊這個例子中，點選 inner view 會先後調用​<code>​handleTap3​</code>​和​<code>​handleTap2​</code>​(因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞)，點選 middle view 會觸發​<code>​handleTap2​</code>​，點選 outer view 會觸發​<code>​handleTap1​</code>​。

自基礎庫版本 ​​1.5.0​​ 起，觸摸類事件支援捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以采用​<code>​capture-bind​</code>​、​<code>​capture-catch​</code>​關鍵字，後者将中斷捕獲階段和取消冒泡階段。

在下面的代碼中，點選 inner view 會先後調用​<code>​handleTap2​</code>​、​<code>​handleTap4​</code>​、​<code>​handleTap3​</code>​、​<code>​handleTap1​</code>​。

如果将上面代碼中的第一個​<code>​capture-bind​</code>​改為​<code>​capture-catch​</code>​，将隻觸發​<code>​handleTap2​</code>​。

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

BaseEvent 基礎事件對象屬性清單：

屬性

說明

​​type​​

String

事件類型

​​timeStamp​​

Integer

事件生成時的時間戳

​​target​​

Object

觸發事件的元件的一些屬性值集合

​​currentTarget​​

目前元件的一些屬性值集合

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

​​detail​​

額外的資訊

TouchEvent 觸摸事件對象屬性清單（繼承 BaseEvent）：

​​touches​​

Array

觸摸事件，目前停留在螢幕中的觸摸點資訊的數組

​​changedTouches​​

觸摸事件，目前變化的觸摸點資訊的數組

特殊事件： ​<code>​&lt;canvas/&gt;​</code>​ 中的觸摸事件不可冒泡，是以沒有 currentTarget。

代表事件的類型。

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

觸發事件的源元件。

id

事件源元件的id

tagName

目前元件的類型

​​dataset​​

事件源元件上由​<code>​data-​</code>​開頭的自定義屬性組成的集合

事件綁定的目前元件。

目前元件的id

目前元件上由​<code>​data-​</code>​開頭的自定義屬性組成的集合

說明： target 和 currentTarget 可以參考上例中，點選 inner view 時，​<code>​handleTap3​</code>​ 收到的事件對象 target 和 currentTarget 都是 inner，而 ​<code>​handleTap2​</code>​ 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

在元件中可以定義資料，這些資料将會通過事件傳遞給 SERVICE。 書寫方式： 以​<code>​data-​</code>​開頭，多個單詞由連字元​<code>​-​</code>​連結，不能有大寫(大寫會自動轉成小寫)如​<code>​data-element-type​</code>​，最終在 event.currentTarget.dataset 中會将連字元轉成駝峰​<code>​elementType​</code>​。

示例：

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

identifier

Number

觸摸點的辨別符

pageX, pageY

距離文檔左上角的距離，文檔的左上角為原點 ，橫向為X軸，縱向為Y軸

clientX, clientY

距離頁面可顯示區域（螢幕除去導覽列）左上角距離，橫向為X軸，縱向為Y軸

特殊說明

x, y

距離 Canvas 左上角的距離，Canvas 的左上角為原點 ，橫向為X軸，縱向為Y軸

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

自定義事件所攜帶的資料，如表單元件的送出事件會攜帶使用者的輸入，媒體的錯誤事件會攜帶錯誤資訊，詳見​​元件​​定義中各個事件的定義。

點選事件的​<code>​detail​</code>​ 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。