首頁技術文章正文

小程序開發(fā)中事件綁定的執(zhí)行方法

更新時間:2023-08-15 來源:黑馬程序員 瀏覽量:

事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為,反饋到邏輯層進行業(yè)務的處理。小程序中常用屬性和綁定方式如下:
1692091969086_小程序.png

當事件回調(diào)觸發(fā)的時候,會收到一個事件對象 event,它的詳細屬性如下表所示:

事件對象的屬性列表

target 是觸發(fā)該事件的源頭組件,而 currentTarget 則是當前事件所綁定的組件。舉例如下:

target

點擊內(nèi)部的按鈕時,點擊事件以冒泡的方式向外擴散,也會觸發(fā)外層 view 的 tap 事件處理函數(shù)。此時,對于外層的 view 來說:

e.target 指向的是觸發(fā)事件的源頭組件,因此,e.target 是內(nèi)部的按鈕組件

e.currentTarget 指向的是當前正在觸發(fā)事件的那個組件,因此,e.currentTarget 是當前的 view 組

bindtap 的語法格式

在小程序中,不存在 HTML 中的 onclick 鼠標點擊事件,而是通過 tap 事件來響應用戶的觸摸行為。通過 bindtap,可以為組件綁定 tap 觸摸事件,語法如下:

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

在頁面的 .js 文件中定義對應的事件處理函數(shù),事件參數(shù)通過形參 event(一般簡寫成 e) 來接收:

Page({
btnTapHandle(e){//按鈕的 tap 事件處理函數(shù)
console.log(e)
//事件參數(shù)對象e
})

在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值

通過調(diào)用 this.setData(dataObject) 方法,可以給頁面 data 中的數(shù)據(jù)重新賦值,示例如下:

//頁面的.js文件
Page({
  data: {
    count: 0
  },
  // 修改 count 的值
  changeCount(){
    this.setDatz({
      count: this.data.count + 1
  })
 }
})

在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值

通過調(diào)用 this.setData(dataObject) 方法,可以給頁面 data 中的數(shù)據(jù)重新賦值,示例如下:

//頁面的.js文件
Page({
  data: {
    count: 0
  }.
  //修改count 的值
  changeCount(){
    this.sesfuta({
      count: this.data.count + 1
    })
  }
})

在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值

通過調(diào)用 this.setData(dataObject) 方法,可以給頁面 data 中的數(shù)據(jù)重新賦值,示例如下:

// 頁面的.js文件
Page({
  data: {
    count: 0
  },
  //修改count的值
  changeCogpt() {
    this.setData({
      count: this.data.count + 1
    })
  }
})

事件傳參

小程序中的事件傳參比較特殊,不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)。例如,下面的代碼將不能正常工作:

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

因為小程序會把 bindtap 的屬性值,統(tǒng)一當作事件名稱來處理,相當于要調(diào)用一個名稱為 btnHandler(123) 的事件處理函數(shù)。

可以為組件提供 data-* 自定義屬性傳參,其中 * 代表的是參數(shù)的名字,示例代碼如下:

<button bindtap="btnHandler"data-info="{{2}}">事件傳參</button>

最終info 會被解析為參數(shù)的名字,數(shù)值 2 會被解析為參數(shù)的值。

在事件處理函數(shù)中,通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值,示例代碼如下:

btnHandler(event){
  // dataset 是一個對象,包含了所有通過 data-*傳遞過來的參數(shù)項
  console.log(event.target.dataset)
  //通過dataset 可以訪問到具體參數(shù)的值
  console.log(event.target.dataset.info)
}

bindinput 的語法格式

在小程序中,通過 input 事件來響應文本框的輸入事件,通過 bindinput,可以為文本框綁定輸入事件:

<input bindinput="inputHandler"><input>

在頁面的 .js 文件中定義事件處理函數(shù):

inputHandler(e){
  // e.detail.vaue是變化過后,文本框最新的值
  console.log(e.detail.value)
}


分享到:
在線咨詢 我要報名
和我們在線交談!