快捷導(dǎo)航

小程序?qū)崿F(xiàn)事件綁定的方法步驟

更新時(shí)間：2022年04月25日 10:17:55 作者：一只呆瓜學(xué)編程

本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1 事件

事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。

請(qǐng)?zhí)砑訄D片描述

1.1 小程序中常用的事件

在這里插入圖片描述

1.2 事件對(duì)象的屬性列表

當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示：

在這里插入圖片描述

1.2.1 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 組件

1.3 bindtap 的語(yǔ)法格式

在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件，而是通過(guò) tap 事件來(lái)響應(yīng)用戶的觸摸行為。

通過(guò) bindtap，可以為組件綁定 tap 觸摸事件，語(yǔ)法如下：

<!--pages/list/list.wxml-->
<button type="primary" bindtap="btntap">按鈕</button>

在頁(yè)面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（一般簡(jiǎn)寫(xiě)成 e）來(lái)接收：

// pages/list/list.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 頁(yè)面對(duì)應(yīng)的時(shí)間處理函數(shù) 
   */ 
  btntap(e) {
    console.log(e)
  }

})

請(qǐng)?zhí)砑訄D片描述

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

通過(guò)調(diào)用 this.setData(dataObject) 方法，可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值。

<!--pages/list/list.wxml-->
<view>{{count}}</view>
<button type="primary" bindtap="btntap">改變count</button>

?
// pages/list/list.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    count: 0
  },

  /**
   * 頁(yè)面對(duì)應(yīng)的時(shí)間處理函數(shù) 
   */ 
  btntap(e) {
    // 更改data中的數(shù)據(jù)
    this.setData( {
      // 要修改的數(shù)據(jù)項(xiàng)
      // 獲取頁(yè)面的數(shù)據(jù) this.data
      count: this.data.count + 1
    } )
  }

})

?

請(qǐng)?zhí)砑訄D片描述

點(diǎn)擊一次按鈕

請(qǐng)?zhí)砑訄D片描述

1.5 事件傳參

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

即<button type="primary" bindtap="btntap(123)">改變count</button>該代碼不會(huì)生效。

因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱 btntap(123) 的事件處理函數(shù)。

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

<!--pages/list/list.wxml-->
<view>{{count}}</view>
<button type="primary" bindtap="btntap" data-info="{{21}}">改變count</button>

info 會(huì)被解析為參數(shù)的名字
數(shù)值 2 會(huì)被解析為參數(shù)的值

在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名即可獲取到具體參數(shù)的值。

// pages/list/list.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    count: 0
  },

  /**
   * 頁(yè)面對(duì)應(yīng)的時(shí)間處理函數(shù) 
   */ 
  btntap(e) {
    console.log(e.target.dataset.info)
  }

})

請(qǐng)?zhí)砑訄D片描述

1.6 bindinput 的語(yǔ)法格式

在小程序中，通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件。

通過(guò) bindinput，可以為文本框綁定輸入事件。

<!--pages/list/list.wxml--><view>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{count}}</view><button type="primary" bindtap="btntap" data-info="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{21}}">改變count</button><input type="text" bindinput="iptinput"/>

/* pages/list/list.wxss */
input {
  border: 1px solid black;
  margin: 10px;
}

在頁(yè)面的 .js 文件中定義事件處理函數(shù)。
獲取文本框的輸入值使用 e.detail.value

// pages/list/list.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    count: 0
  },

  /**
   * 頁(yè)面對(duì)應(yīng)的時(shí)間處理函數(shù) 
   */ 
  btntap(e) {
    console.log(e.target.dataset.info)
  },
  iptinput(e) {
  	// 獲取輸入框的值
    const value = e.detail.value
    // 打印輸入框的輸入值
    console.log(value)
    //將輸入框的值賦值給頁(yè)面的數(shù)據(jù)變量，用于頁(yè)面數(shù)據(jù)的渲染
    this.setData({
      count: value
    })
  }

})

請(qǐng)?zhí)砑訄D片描述