• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
• 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
• 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。

截取官方文檔中的部分交互事件

事件實(shí)現(xiàn)流程

• 首先在頁面.wxml中使用bind定義事件捕獲,并綁定回調(diào)函數(shù)

<view bind:tap="onTap" class="journey-container"></view>
復(fù)制代碼

• 然后在.js文件中定義回調(diào)函數(shù)需要執(zhí)行的業(yè)務(wù)邏輯

// 事件的回掉函數(shù)
  onTap: function(params) {
    //跳轉(zhuǎn)頁面
    console.log(666)
  },
復(fù)制代碼

• 隨后觸發(fā)事件(本例中是tap事件)，便可以執(zhí)行對(duì)應(yīng)邏輯

事件冒泡設(shè)置-catch與bind

catch會(huì)阻止事件繼續(xù)冒泡，bind不會(huì)阻止事件繼續(xù)冒泡

• 首先在頁面.wxml文件中定義事件與回調(diào)函數(shù)

<view catch:tap="onViewTap" class="journey-container">
    <text catch:tap="onTextTap" class="journey">開啟小程序之旅</text>
  </view>
復(fù)制代碼

• 然后在頁面.js文件中定義回調(diào)函數(shù)

onViewTap: function(params) {
    console.log("on tap View")
  },
  onTextTap: function() {
    console.log("on tap Text")
  },
復(fù)制代碼

• 點(diǎn)擊text-開啟小程序之旅，僅調(diào)用onTextTap，是由于catch阻止了tap事件的冒泡行為

跳轉(zhuǎn)頁面事件介紹

• 小程序中提供了兩個(gè)頁面跳轉(zhuǎn)的函數(shù)，為navigateTo與redirectTo，寫在綁定事件的回調(diào)函數(shù)中，觸發(fā)事件即可跳轉(zhuǎn)路由，下面是回調(diào)函數(shù)onTap

onTap: function(params) {
    //跳轉(zhuǎn)頁面
    // wx.navigateTo({
    //   url:"/pages/posts/posts"
    // })
    //跳轉(zhuǎn)頁面
    wx.redirectTo({
      url:"/pages/posts/posts"
    })
  }
復(fù)制代碼

• 二者的區(qū)別：navigateTo保留當(dāng)前父頁面存入頁面棧中，最多存10個(gè)頁面，不會(huì)銷毀當(dāng)前頁面,可返回；redirectTo會(huì)銷毀當(dāng)前父頁面，直接跳轉(zhuǎn)至下個(gè)子頁面

• 跳轉(zhuǎn)頁面演示

在頁面.wxml模塊中添加了監(jiān)聽tap事件的回調(diào)函數(shù)onGoToDeatil

<view bind:tap="onGoToDetail" class="post-container">
</view>
復(fù)制代碼

在頁面.js文件中添加跳轉(zhuǎn)邏輯

onGoToDetail(event){
    wx.navigateTo({
      url:'/pages/post-detail/post-detail'
    })
  }
復(fù)制代碼

點(diǎn)擊post-container組件即可完成頁面跳轉(zhuǎn)，至post-detail頁面

至此便完成小程序事件入門