• ?? 所屬專欄：【微信小程序開發(fā)教程】

• ?? 作??者：我是夜闌的狗??

• ?? 個人簡介：一個正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實戰(zhàn)分享 ，歡迎咨詢！

• ?? 歡迎大家：這里是CSDN，我總結(jié)知識的地方，喜歡的話請三連，有問題請私信 ?? ?? ??

前言

??大家好，又見面了，我是夜闌的狗??，本文是專欄【微信小程序開發(fā)教程】專欄的第10篇文章;
??今天開始學(xué)習(xí)微信小程序的第六天??????，開啟新的征程，記錄最美好的時刻??，每天進(jìn)步一點點。
??專欄地址：【微信小程序開發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開發(fā)過程的總結(jié)，希望能夠加深自己的印象，以及幫助到其他的小伙伴????。
??如果文章有什么需要改進(jìn)的地方還請大佬不吝賜教????。

一、事件

??前面已經(jīng)介紹完了WXML模板語法–數(shù)據(jù)綁定，基本上了解到了如何在WXML頁面上動態(tài)的顯示數(shù)據(jù)以及組件上的屬性控制等。接下來就來講解一下另外一個模板語法–事件綁定。話不多說，讓我們原文再續(xù)，書接上回吧。

1、事件的定義

??在一起學(xué)習(xí)小程序里事件怎么綁定之前，首先先來了解一下什么是事件？事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。

??當(dāng)用戶在頁面上觸發(fā)按鈕點擊事件的時候，渲染層將觸發(fā)的事件通過微信客戶端傳給邏輯層（JS端）進(jìn)行處理。

2、小程序中常用的事件

??在小程序中常用的事件三種，分別是 tap、input 和 change 事件，相信大家對這些事件應(yīng)該都不會陌生，其中 tap 為點擊事件一般用得比較多。

??事件綁定方式有兩種，第一種是 bind + 類型，第二種是 bind: + 類型。但平時用最多的是第一種方式。

3、事件對象的屬性列表

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

??在實際開發(fā)過程中，會經(jīng)常用到 event.target ，基本用得比較多的屬性都給標(biāo)紅了。

4、 target 和 currentTarget 的區(qū)別

?? 在對象 event 中，target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。通過下面的栗子來進(jìn)行詳細(xì)了解：

??在WXML中在 view 組件內(nèi)部添加按鈕 button，當(dāng)點擊內(nèi)部的按鈕時，點擊事件以冒泡的方式向外擴(kuò)散，也會觸發(fā)外層 view 的 tap 事件處理函數(shù)，簡而言之就是當(dāng)父元素設(shè)置了點擊事件時，子元素也能觸發(fā)。具體來看一下運行效果：

??此時這兩個屬性就會有區(qū)別，對于內(nèi)部的 button 來說：

• event.target 指向的是觸發(fā)事件的源頭組件，因此，event.target 是指向當(dāng)前組件 button；
• event.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個組件，也就是綁定觸發(fā)事件的，因此，event.currentTarget 是指向外部組件 view ；

二、tap 事件

1、bindtap 的語法格式

??在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點擊事件，而是通過 tap 事件來響應(yīng)用戶的觸摸行為。結(jié)合上一個栗子，就會有個疑問：假設(shè)外內(nèi)部都設(shè)置有 tap 事件，實際效果會使怎么樣的呢？下面來進(jìn)行實踐一下。

cshPageTab.js：

??在頁面的 .js 文件中定義對應(yīng)的事件處理函數(shù)，事件參數(shù)通過形參 event（可以簡寫成 e） 來接收：

Page({
  tabHandler(event){
    console.log("event.target =====>",event.target);
    console.log("event.currentTarget =====>",event.currentTarget);
  },
  btnTabHandler(event){
    console.log("button event.target =====>",event.target);
    console.log("button event.currentTarget =====>",event.currentTarget);
  }
})

cshPageTab.wxml：

??通過 bindtap 方式，可以為組件綁定 tap 觸摸事件，語法如下：

<view id="thisOut" class="view-click" bindtap="tabHandler">
  <button id="thisIn" type="primary" bindtap="btnTabHandler">CSH</button>
</view>

??這樣就實現(xiàn)了 tap 事件綁定了。

• 點擊外部組件：

• 點擊內(nèi)部組件：

??對比兩次點擊結(jié)果，可以發(fā)現(xiàn)，內(nèi)外組件都設(shè)置了 tap 事件，點擊內(nèi)部按鈕都會一起觸發(fā)。

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

??當(dāng)我們想通過點擊來改變某個數(shù)值時，就可以調(diào)用 this.setData(dataObject) 方法，可以給頁面 data 中的數(shù)據(jù)重新賦值，可以通過下面的??來學(xué)習(xí)一下：

cshPageTab.js：

??通過 this.data 就能獲取當(dāng)前 data 里面的數(shù)據(jù)，在刷新數(shù)值即可。

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

  // count + 6 的點擊事件處理函數(shù)
  btnCount(event){
    this.setData({
      count: this.data.count + 6
    })
  }
})

cshPageTab.wxml：

<view id="thisOut" class="view-click" bindtap="tabHandler">
  <button id="thisIn" type="primary" bindtap="btnTabHandler">CSH</button>
  <button type="primary" bindtap="btnCount">+6</button>
</view>

??可以來看一下實際效果：

3、事件傳參

??小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)。比如下面的代碼是不能正常運行，在 Vue 里面這樣寫是沒有問題，但在小程序中是不行的。

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

??因為小程序 bindtap 后面引號內(nèi)容代表的是事件處理函數(shù)的名字理，相當(dāng)于要調(diào)用一個名稱為 btnCount(123) 的事件處理函數(shù)。

• 傳遞參數(shù)

??那小程序怎么傳遞參數(shù)呢？這里就可以通過組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，具體實現(xiàn)代碼如下：

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

??其中，info 會被解析為參數(shù)的名字，數(shù)值 2 會被解析為參數(shù)的值，如果這里不用雙括號，那接收到的參數(shù)會是字符串類型。

• 獲取參數(shù)

??在事件處理函數(shù)中，通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，具體實現(xiàn)代碼如下：

Page({
  btnCountEvent(event){
    // 通過 dataset 可以訪問到具體參數(shù)的值
    console.dir(event.target.dataset.info);
  },
})

??其中 dataset 是一個對象，里面包含了所有通過 data-* 傳遞過來的參數(shù)項?？梢詠砜匆幌聦嶋H效果：

三、input 事件

1、bindinput 的語法格式

??在小程序中，也可以對文本輸入框進(jìn)行綁定事件，通過 input 事件來響應(yīng)文本框的輸入事件，語法格式如下：

cshPageTab.js：

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

Page({
  btnInput(event){
    // event.detail.value 是變化后的值，文本框里最新的值
    console.dir("event.detail.value = " + event.detail.value);
  },
})

cshPageTab.wxml：
??在小程序中，通過 input 事件來響應(yīng)文本框的輸入事件，語法格式如下：

<input bindinput="btnInput"></input>

??可以來看一下實際效果：

2、實現(xiàn)文本框和 data 之間的數(shù)據(jù)同步

??在實際開發(fā)過程中，文本框里的數(shù)據(jù)只要與data的數(shù)據(jù)要進(jìn)行同步。其實現(xiàn)流程可分為以下步驟：

• Step 1、定義數(shù)據(jù)

cshPageTab.js：

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    msg: "我是夜闌的狗，你好呀！",
  },
})

• Step 2、渲染結(jié)構(gòu)

cshPageTab.wxml：

<input value="{{msg}}" bindinput="btnInput"></input>

• Step 3、美化樣式

cshPageTab.wxss：

input{
  border: 1px solid rgb(161, 153, 153);
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

• Step 4、綁定 input 事件處理函數(shù)

cshPageTab.js：

??在頁面的 .js 文件中定義事件處理函數(shù)，通過前面的栗子可以知道怎么刷新 data 里的值，所以只要獲取到文本框里最新的值，在將其重新給 msg 賦值即可。

Page({
  btnInput(event){
    // event.detail.value 是變化后的值，文本框里最新的值
    console.dir("event.detail.value = " + event.detail.value);
    // 通過event.detail.value獲取文本框最新的值,再給msg賦值
    this.setData({
      msg: event.detail.value,
    });
  },
})

??可以來看一下實際效果：

??我的周末就這么沒了，啊啊啊啊

總結(jié)

??感謝觀看，這里就是WXML 模板語法 - 事件綁定 – tap & input的介紹使用，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。?? ?? ??

??也歡迎你，關(guān)注我。?? ?? ??

??原創(chuàng)不易，還希望各位大佬支持一下，你們的點贊、收藏和留言對我真的很重要！??！?? ?? ?? 最后，本文仍有許多不足之處，歡迎各位認(rèn)真讀完文章的小伙伴們隨時私信交流、批評指正！下期再見。??

更多專欄訂閱:

• ?? 【LeetCode題解（持續(xù)更新中）】
• ?? 【Java Web項目構(gòu)建過程】
• ?? 【微信小程序開發(fā)教程】
• ? 【JavaScript隨手筆記】
• ?? 【大數(shù)據(jù)學(xué)習(xí)筆記（華為云）】
• ?? 【程序錯誤解決方法（建議收藏）】
• ?? 【軟件安裝教程】

訂閱更多，你們將會看到更多的優(yōu)質(zhì)內(nèi)容?。?/font>文章來源地址http://www.zghlxwxcb.cn/news/detail-791022.html

到了這里，關(guān)于【微信小程序】-- WXML 模板語法 - 事件綁定 -- tap & input （十）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！