【微信小程式】wx事件繫結
阿新 • • 發佈:2022-04-08
1.什麼是事件
事件是渲染層到邏輯層的通訊方式。通過事件可以將使用者在渲染層產生的行為
,反饋到邏輯層進行業務的處理。
2.小程式中常用的事件
3.事件物件的屬性列表
當事件回撥觸發的時候,會收到一個事件物件event,它的詳細屬性如下表所示
4.target和currentTarget的區別
target是觸發該事件的源頭元件,而currentTarget則是當前事件所繫結的元件。
舉例如下:
5.bindtap的語法格式
在小程式中,不存在HTML中的onclick滑鼠點選事件,而是通過 tap事件來響應使用者的觸控行為。
通過bindtap,可以為元件繫結tap觸控事件,語法如下:
在頁面的.js檔案中定義對應的事件處理函式,事件引數通過形參event(一般簡寫成e)來接收:
6.在事件處理函式中為data中的資料賦新值
通過呼叫this.setData(dataObject)方法,可以給頁面data中的資料重新賦值,
示例如下:
7.事件傳參
小程式中的事件傳參比較特殊,不能在繫結事件的同時為事件處理函式傳遞引數。
例如,下面的程式碼將不能正常工作:
因為小程式會把 bindtap的屬性值,統一當作事件名稱來處理,相當於要呼叫一個名稱為 btnHandler(123)的事件處理函式。
可以為元件提供data-*自定義屬性傳參,其中**代表的是引數的名字,示例程式碼如下:
最終:
info會被解析為引數的名字·
數值⒉會被解析為引數的值
在事件處理函式中,通過event.target.dataset.引數名 即可獲取到具體引數的值,示例程式碼如下:
add(e){
this.setData({
count:e.target.dataset.count
})
},
8.bindinput的語法格式
在小程式中,通過input事件來響應文字框的輸入事件,語法格式如下:
通過bindinput,可以為文字框繫結輸入事件:
在頁面的.js 檔案中定義事件處理函式:
9.實現文字框和data之間的資料同步
實現步驟:
1:定義資料
2:渲染結構
3:美化樣式
4:繫結input事件處理函式
//js:
Page({
data: {
count:0
},
inputNew(e){
this.setData({
count:e.detail.value
})
})
//wxml
<input type="text" bindinput="inputNew" value="{{count}}"/>