介面與邏輯層互動，第一：從邏輯層往介面層暴露資料；第二：介面層需要有一些行為用邏輯層處理，就用到事件機制。

事件機制，在html中的事件機制是一樣的，只是在小程式中有一些微小的變化。

小程式事件處理，通過標籤的屬性，指定事件處理的函式。

bindtap="xx"

eg:<button bindtap="tapHandle">click me</button>，然後在邏輯層就可以去處理 tapHandle 這個事件。

Page({
  // 頁面邏輯層，可以定義data
  // on xxx 生命週期函式
  // 定義用於介面層的事件處理函式
  tapHandle(e){
    // e 是事件引數  事件引數、誰被點選都可以打印出
    console.log(e)
  }
 
})
 

解決冒泡：

類似有兩個繫結事件，且是子父級關係的，都會有冒泡。

解決辦法就是，給子元素的屬性改為catchtap=""

<view viewbindtap="viewbindtap">
  <button catchtap="tapHandle">click me</button>
  <!-- 類似有兩個繫結事件，且是子父級關係的，都會有冒泡 -->
  <!-- 解決辦法就是，給子元素的屬性改為catchtap="" -->
</view>

多條資料，如何獲取到，點選的是哪一條？

可以通過data-xx 屬性 給事件處理函式傳遞額外的引數。

<!-- 可以通過data-xx 屬性  給事件處理函式傳遞額外的引數   -->
<!-- 有好多條資料，希望點選時，能夠獲取到點選的是哪一個？ -->
<!-- 給按鈕新增屬性形式，data-id="1" -->
<view>
  <text>item</text>
  <button bindtap="removeHandle" data-id="1">remove</button>
</view>
<view>
  <text>item</text>
  <button bindtap="removeHandle" data-id="2">remove</button>
</view>
<view>
  <text>item</text>
  <button bindtap="removeHandle" data-id="3">remove</button>
</view>
<view>
  <text>item</text>
  <button bindtap="removeHandle" data-id="4">remove</button>
</view>
<view>
  <text>item</text>
  <button bindtap="removeHandle" data-id="5">remove</button>
</view>
 

邏輯層：

當點選條目時，會打印出當前的e。