事件綁定和冒泡

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

• key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。自基礎(chǔ)庫版本 1.5.0 起，在非原生組件中，bind和catch后可以緊跟一個(gè)冒號，其含義不變，如bind:tap、catch:touchstart。
• value 是一個(gè)字符串，需要在對應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會報(bào)錯(cuò)。

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

如在下邊這個(gè)例子中，

點(diǎn)擊 inner view 會先后調(diào)用handleTap3和handleTap2(因?yàn)閠ap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節(jié)點(diǎn)傳遞)，

點(diǎn)擊 middle view 會觸發(fā)handleTap2，

點(diǎn)擊 outer view 會觸發(fā)handleTap1。

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

target    觸發(fā)事件的源組件。
currentTarget    事件綁定的當(dāng)前組件。

說明： target 和 currentTarget 可以參考上例中，點(diǎn)擊 inner view 時(shí)，

handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，

而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

事件的捕獲階段

自基礎(chǔ)庫版本 1.5.0 起，觸摸類事件支持捕獲階段。

  1.捕獲階段位于冒泡階段之前  

  2.且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反  

  3.需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch關(guān)鍵字  

  4.后者（capture-catch）將中斷捕獲階段和取消冒泡階段  

在下面的代碼中，點(diǎn)擊 inner view 會先后調(diào)用handleTap2、handleTap4、handleTap3、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>

如果將上面代碼中的第一個(gè)capture-bind改為capture-catch，將只觸發(fā)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>

dataset
在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。
書寫方式：
以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。
連字符之后的單詞首字母大寫，一個(gè)單詞中的大寫轉(zhuǎn)為小寫
示例：
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 會轉(zhuǎn)為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉(zhuǎn)為小寫
  }
})

引用
WXML 提供兩種文件引用方式import和include
import 有作用域的概念，即只會 import 目標(biāo)文件中定義的 template，而不會 import 目標(biāo)文件 import 的 template。
如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

include
include 可以將目標(biāo)文件除了 <template/> <wxs/> 外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>