1. 程式人生 > 其它 >【微信小程式】wx事件繫結

【微信小程式】wx事件繫結

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}}"/>