1、事件綁定
在微信小程序中，事件的綁定依附於組件，當事件觸發時，就會執行事件對應的處理函數。
我們回到前幾章中的例子，將index頁面調整為首頁（app.json中調整pages數組元素的順序），此時我們希望，點擊頁面中的“Hello World”字樣，能夠跳轉到我們之前寫的Welcome頁面中去：
首先來說明一下事件的綁定形式：
- 事件綁定依附於組件，所以其綁定的寫法和組件的屬性寫法是類似的，以key、value形式
- key以bind或catch開頭並跟上事件類型，如bindtap、catchtap，也可以使用冒號如bind:tap、catch:tap
- value是一個字符串，對應Page中同名的函數
原來的wxml中HelloWorld對應的組件代碼為：
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
3
1
<view class="usermotto">
2
<text class="user-motto">{{motto}}</text>
3
</view>
那么我們要綁定點擊事件的話，則該代碼變為：
<view class="usermotto">
<text class="user-motto" catchtap="onTextTap">{{motto}}</text>
</view>
3
1
<view class="usermotto">
2
<text class="user-motto" catchtap="onTextTap">{{motto}}</text>
3
</view>
同時，在index對應js文件中Page，需要增加同名的函數用以處理事件，即這里的“onTextTap”，跳轉功能的話，可以通過API文檔看到，使用wx.navigateTo方法即可：
這樣一來就實現了我們的目的，點擊HelloWorld字樣，跳轉到welcome頁面。
2、事件分類
事件分為冒泡事件和非冒泡事件：
- 冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞
- 非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞
所謂事件向父節點傳遞，即
子元素上事件的觸發，會繼續傳遞導致父元素事件的觸發。而之前綁定事件的兩種方式bind和catch的區別也就出現了，
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
如下例中，點擊 inner view 會先后調用 handleTap3 和 handleTap2（因為tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節點傳遞），點擊 middle view 會觸發handleTap2，點擊 outer view 會觸發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>
9
1
<view id="outer" bindtap="handleTap1">
2
outer view
3
<view id="middle" catchtap="handleTap2">
4
middle view
5
<view id="inner" bindtap="handleTap3">
6
inner view
7
</view>
8
</view>
9
</view>
目前微信小程序中提供了
12種常見冒泡事件，比如我們常用的點擊事件tap就是冒泡事件，其他的都是非冒泡事件。
3、數據綁定
在微信提供demo的index頁面中，我們可以看到，HelloWorld字樣對應的代碼片段為 <text class="user-motto">{{motto}}</text> ，而非直接的 <text class="user-motto">Hello World</text>。
這里的
雙大括號包裹變量，就是數據綁定，
變量對應的動態數據來自對應Page的data屬性，也就是說這里的motto是變量名，我們在Page的data中可以找到其對應的值，應該是Hello World：
那么現在我們使用數據綁定的形式，在welcome頁面顯示一個nickname，比如“Welcome, Dulk!”，那么首先修改welcome.wxml中text組件內容為數據綁定形式，然后在對應Page的data中給一個同名變量名的值：
<text>Welcome,{{nickname}}!</text>
1
1
<text>Welcome,{{nickname}}!</text>
Page({
data:{
"nickname":"Dulk"
}
})
x
1
Page({
2
3
data:{
4
"nickname":"Dulk"
5
}
6
7
})
可以看到頁面的效果了：
另外值得一提的是，在組件中某些使用布爾值的屬性，需要采用數據綁定的形式，如下例：
<checkbox checked="false"> </checkbox>
1
1
<checkbox checked="false"> </checkbox>
以上獲取到的checked實際上是true，因為微信中將其false視為了字符串“false”，而字符串轉換為布爾值則代表真，所以要使用布爾類型，用數據綁定包裹起來，如希望checked屬性為false，則應該如下：
<checkbox checked="{{false}}"> </checkbox>
1
1
<checkbox checked="{{false}}"> </checkbox>
4、數據傳遞
現在我們希望頁面的某些屬性值能進行傳遞，這是很常見的常見，比如一個信息列表，點擊不同的信息以查看詳情，你總得通過不同的id來進行跳轉吧，這就需要用到數據傳遞了。
現在我們希望HelloWorld點擊時，傳遞一個數值如999到welcome頁面進行顯示，需要這樣做：
- 將999傳遞到事件函數中
- 在事件函數中把999傳遞給welcome頁面
4.1 將自定義屬性值傳遞到事件函數中
在組件中，可以自定義數據，而書寫的方式則為：以
data- 開頭，多個單詞由連字符 - 鏈接，大寫無效，到函數中會自動轉為小寫駝峰式命名。如 data-element-type，在函數中獲取到的屬性名稱會被轉換為 elementType。而該屬性，會存在於事件函數的事件對象event的currentTarget對象的dataset屬性中。
那么要傳遞數值999，我們可以這樣：
<text class="user-motto" catchtap="onTextTap" data-number="999">{{motto}}</text>
1
<text class="user-motto" catchtap="onTextTap" data-number="999">{{motto}}</text>
而在事件函數中，我們可以這樣獲取：
4.2 將函數中的值傳遞到另一個頁面
現在我們獲取到了value，我們可以通過
url?param=的方式，將參數傳遞到另一個頁面，而在另一個頁面的onLoad函數的options參數中，會自動獲取到，如下index.js中：
相對的，在welcome頁面的Page中：
4.3 動態綁定數據和頁面顯示
接下來就是之前熟悉的操作了，將值放入到data中，然后頁面用動態綁定：
頁面效果也就有了，如下圖：
