一、

1.事件

事件是渲染層到邏輯層的通訊方式，通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理

2.小程序中常用的事件

3.事件對象的屬性列表

當事件回調觸發的時候，會收到一個事件對象event，其屬性為：

二、

1.target和currentTarget

target是觸發該事件的源頭組件，而currentTarget是當前事件所綁定的組件

例如：

點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層view的tap事件處理函數

此時，對于外層的view來說：

e.target指向的是觸發事件的源頭組件，因此，e.target是內部的按鈕組件

e.currentTarget指向的是當前正在觸發事件的那個組件，因此，e.currentTarget是當前的view組件

2.bindtap

在小程序中，不存在HTML中的onclick鼠標點擊事件，而是通過tap事件來響應用戶的觸摸行為

（1）通過bindtap，可以為組件綁定tap觸摸事件

<button type="primary" bindtap="btnTapHandler">按鈕</button>

（2）在頁面的.js文件中定義對應的事件處理函數，事件參數通過形參event（一般寫為e）來接收

Page({data: {btnTapHandler(e) { //按鈕的tap事件處理函數console.log(e) //事件的參數對象e}})

三、

1.在事件處理函數中為data中的數據賦值

通過調用this.setData(data Object)方法，可以給頁面data中的數據重新賦值

<!--pages/list/list.wxml-->
<button type="primary" bindtap="CountChange">+1</button>

// pages/list/list.js
Page({data: {count:0},//修改count的值CountChange(){this.setData({count:this.data.count + 1})}})

每按一次+1，控制臺的count都會加一

2.事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數

<button type="primary" bindtap="btnHandler(123)">事件傳參</button>

以上代碼不能正常運行

因為小程序會把bindtap的屬性值統一當作事件名稱來處理，相當于要調用一個名稱為btnHandler(123)的事件處理函數

可以為組件提供data-*自定義屬性傳參，其中*代表的是參數的名字

<!--pages/list/list.wxml-->
<button type="primary" data-info="{{2}}">事件傳參</button>

info會被解析為參數的名字，數值2被解析為參數的值

在事件處理函數中，通過event.target.dataset.函數名即可獲取到具體參數的值

<!--pages/list/list.wxml-->
<button type="primary" bindTap="btnTap" data-info="{{2}}">+2</button>

// pages/list/list.js
Page({data: {count:0},btnTap(e) {this.setData({count:this.data.count + e.target.dataset.info})}})

如果明確知道自己傳的是一個數字的話，建議大家放在Mustache語法里面

3.bindinput的語法格式

在小程序中，通過input事件來響應文本框的輸入事件

（1）通過bindinput，可以為文本框綁定輸入事件

<!--pages/list/list.wxml-->
<input bindinput="inputHandler"></input>

// pages/list/list.js
Page({data: {count:0},inputHandler(e){//e.detail.value是變化過后，文本框最新的值console.log(e.detail.value)}})

4.實現文本框和data之間的數據同步

實現步驟：

（1）定義數據

（2）渲染結構

（3）美化樣式

（4）綁定input事件處理函數