【小程序】事件

事件

數據綁定部分講了，對象狀態發生變化，通知頁面更新視圖元素的單向數據流向。

一旦用戶操做或者數據更新引發數據變化，視圖須要同步更新。就須要用到事件傳遞了。視圖上的數據都必須用過事件傳遞給對象，只有用戶操做視圖，才能獲取到數據，並更新對象狀態。調用this.setData（）方法實現視圖的部分渲染。

圖：視圖-對象

• 視圖A因爲用戶操做，觸發事件A 。
• 事件A處理函數中，更新對象A和對象B的狀態。
• 因爲對象A和B狀態變化，通知視圖A和B更新。

事件的使用方式

<!-- index.wxml --> <view bindtap="changeText" data-hi="wechat" id="tapTest"> {{ message }} </view> 

index.js:
Page({
 data: { message: 'Hello MINA!' }, changeText: function(e){ console.log(e) this.setData({ message:'changed data' }) } }) 

事件分類

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

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

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 設備，重按時會觸發

事件綁定與冒泡

圖：事件冒泡與捕獲

事件綁定的寫法以 key、value 的形式。

• key 以bind或catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。
• value 是一個字符串，須要在對應的 Page 中定義同名的函數。否則當觸發事件的時候會報錯。

<view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3">inner view</view> </view> </view> 

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

事件的捕獲階段

捕獲階段位於冒泡階段以前，且在捕獲階段中，事件到達節點的順序與冒泡階段剛好相反。須要在捕獲階段監聽事件時，能夠採用capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。

在下面的代碼中，點擊 inner view 會前後調用handleTap二、handleTap四、handleTap三、handleTap1。

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

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

 

----------------------------------------

小程序系列：

  前言

  項目結構

  生命週期

  請求與封裝

  數據綁定

  事件

  基礎使用： component使用 、 wxs使用 、 節點操做 、 頁面跳轉 、 緩存

  前端架構淺談

----------------------------------------