一 什么是事件
事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。
二?小程序中常用事件
三 事件對(duì)象的屬性列表
當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示。
四 target 和 currentTarget 的區(qū)別
target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。
點(diǎn)擊內(nèi)部的按鈕時(shí)，點(diǎn)擊事件以冒泡的方式向外擴(kuò)散，也會(huì)觸發(fā)外層 view 的 tap 事件處理函數(shù)。
此時(shí)，對(duì)于外層的 view 來(lái)說(shuō)：
e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件。
e.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget 是當(dāng)前的 view 組件。
五 bindtap 的語(yǔ)法格式
在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件，而是通過(guò) tap 事件來(lái)響應(yīng)用戶的觸摸行為。
1 通過(guò) bindtap，可以為組件綁定 tap 觸摸事件，語(yǔ)法如下。
<button type="primary" bindtap="btnTapHandler">按鈕</button>
2 在頁(yè)面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（一般簡(jiǎn)寫(xiě)成 e） 來(lái)接收。
Page({
// 定義按鈕的事件處理函數(shù)
btnTapHandler(e) {
console.log(e)
}
})六 在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值
通過(guò)調(diào)用 this.setData(dataObject) 方法，可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值。
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
count: 0
},
// +1 按鈕的點(diǎn)擊事件處理函數(shù)
CountChange() {
this.setData({
count: this.data.count + 1
})
},
})七 錯(cuò)誤的事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正常工作。
因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。
八 正確的事件傳參
可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下。
<button type="primary" bindtap="btnTap2" data-info="{{2}}">事件傳參</button>
最終：
-
info 會(huì)被解析為參數(shù)的名字
-
數(shù)值 2 會(huì)被解析為參數(shù)的值文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-404756.html
在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-404756.html
btnTap2(e) {
this.setData({
// dataset 是一個(gè)對(duì)象，包含了所有通過(guò) data-* 傳遞過(guò)來(lái)的參數(shù)項(xiàng)，通過(guò) dataset 可以訪問(wèn)到具體參數(shù)的值
count: this.data.count + e.target.dataset.info
})
}到了這里，關(guān)于微信小程序事件綁定的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
