目錄

一、事件的概念

二、小程序中常用的事件

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

四、bindtap的語法格式

（1）綁定tap觸摸事件

（2）編寫處理函數(shù)

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

六、事件傳參

七、bindinput的語法格式

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

一、事件的概念

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

二、小程序中常用的事件

類型   綁定方式                      描述
tap    bindtap或bind:tap           手指觸摸后馬上離開，類似于HTML中的click事件 
input  bindinput或bind:input       文本框的輸入事件 
change bindchange或bind:change     狀態(tài)改變時(shí)觸發(fā) 

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

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

屬性            類型      說明
type           string    事件類型
timeStamp      Integer   頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)
target         Object    觸發(fā)事件的組件的一些屬性值集合
currentTarget  Object    當(dāng)前組件的一些屬性集合
detail         Object    額外的信息
touches        Array     觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組
changedTouches Array     觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組

注意：

target和currentTarget的區(qū)別

target是觸發(fā)該事件的源頭組件，而currentTarget是當(dāng)前事件所綁定的組件。

舉例如下：

點(diǎn)擊了按鈕后，點(diǎn)擊事件會(huì)以冒泡的方式向外擴(kuò)散，也會(huì)觸發(fā)外層的view的tap事件處理函數(shù)，對(duì)于view來說：

e.target就是指觸發(fā)事件的源頭組件

e.currentTarget就是當(dāng)前正在觸發(fā)事件的那個(gè)組件，也就是view

四、bindtap的語法格式

在小程序中，不存在HTML中的onclick鼠標(biāo)點(diǎn)擊事件，而是通過tap事件來響應(yīng)用戶的觸摸行為。一般分為兩步：

（1）通過bindtap，可以為組件綁定tap觸摸事件

（2）在頁面的js文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過形參event（一般簡寫成e）來接受

（1）綁定tap觸摸事件

<view>
 <button type="primary" bind:tap="hanshu">按鈕</button>
</view>

（2）編寫處理函數(shù)

//js文件中
hanshu(e){
    console.log('666')
 }

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

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

案例：制作一個(gè)按鈕，點(diǎn)擊他之后，count+1，并將count值顯示在頁面

//js文件
 hanshu(e){
   this.setData({
     count:this.data.count+1
   })
 }



<view>
 <view>count={{count}}</view>
 <button type="primary" bind:tap="hanshu">點(diǎn)擊我count+1</button>
</view>

六、事件傳參

小程序中的傳參不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)，如下將是不正確的。

<button bind:tap="hanshu(123)">按鈕</button>

因?yàn)樾〕绦驎?huì)將bintap的屬性值全部當(dāng)成事件名稱來處理，相當(dāng)于要調(diào)用一個(gè)名稱是hanshu(123)的事件處理函數(shù)。

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

<view>
 <view>count={{count}}</view>
 <button type="primary" bind:tap="hanshu" data-i="{{10}}">點(diǎn)擊我count</button>
</view>

data后面的i可以自己取名稱，i會(huì)被解析成參數(shù)的名字，10是參數(shù)的值，在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名稱也就是event.target.dataset.i可以獲取參數(shù)的值。

 hanshu(e){
   this.setData({
     count:this.data.count+e.target.dataset.i
   })
 }

七、bindinput的語法格式

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

（1）通過bindinput可以為文本框綁定輸入事件

<view>
  <input bindinput="handl" />
</view>

（2）在js文件處理事件函數(shù)

handl(e){
    console.log(e.detail.value)
  },

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

handl(e){
    this.setData({
      msg:e.detail.value
    })
  },


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

<view>msg={{msg}}</view>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-699488.html

到了這里，關(guān)于微信小程序開發(fā)---事件的綁定的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！