知識(shí)點(diǎn)1：什么是事件

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

知識(shí)點(diǎn)2：小程序中常用的事件

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

知識(shí)點(diǎn)3：事件對(duì)象的屬性列表

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

屬性	類型
type	String	事件類型
timeStamp	Integer	頁(yè)面打開到觸發(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ù)組

知識(shí)點(diǎn)4：target和currentTarget的區(qū)別

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

<button 
bind:tap="targetClick" 
type="primary" 
plain="true" 
id="123" 
>target按鈕</button>

Page({targetClick(event){console.log(event)}
})

{type: "tap", timeStamp: 2827, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "123", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 165.15625, y: 35.328125}
mark: {}
mut: false
target: {id: "123", offsetLeft: 0, offsetTop: 0, dataset: {…}}
timeStamp: 2827
touches: [{…}]
type: "tap"
__evName: "tap"
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: "target按鈕", anchorRelatedText: "", anchorTapTime: 1737007035902}
_requireActive: true
_userTap: true
__proto__: Object

<view bind:tap="targetClick" id="456" ><button type="primary" 
id="123" 
>target按鈕</button></view>

Page({targetClick(event){console.log(event)}
})

{type: "tap", timeStamp: 4896, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "456", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 97.828125, y: 60.65625}
mark: {}
mut: false
target: {id: "123", offsetLeft: 0, offsetTop: 25, dataset: {…}}
timeStamp: 4896
touches: [{…}]
type: "tap"
__evName: "tap"
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: "target按鈕", anchorRelatedText: "", anchorTapTime: 1737007515471}
_requireActive: true
_userTap: true
__proto__: Object

• 點(diǎn)擊內(nèi)部的按鈕時(shí)，點(diǎn)擊事件以冒泡的方式向外擴(kuò)散，也會(huì)觸發(fā)外層view 的tap 事件處理函數(shù)。
• target 指向的是觸發(fā)事件的源頭組件，因此，target是內(nèi)部的按鈕組件。（事件的觸發(fā)者）
• currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget 是當(dāng)前的 view 組件。（事件的響應(yīng)者）

知識(shí)點(diǎn)5：bindtap 語(yǔ)法格式

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

<!-- 定義 -->
<button type="primary" bindtap="btnTapHandler">登錄</button>

Page({//bindtap的實(shí)現(xiàn)btnTapHandler(e){console.log(e)}
})

知識(shí)點(diǎn)6：在事件處理函數(shù)中為data中的數(shù)據(jù)賦值

• 通過調(diào)用this.setData(dataObject)方法進(jìn)行賦值。

<!-- 定義 -->
<button type="primary" bindtap="changeCountHandler">當(dāng)前計(jì)數(shù)：{{countNum}}</button>

Page({data:{
countNum:0
},
//target 實(shí)現(xiàn)targetClick(event){console.log(event)},//bindtap 實(shí)現(xiàn)btnTapHandler(e){console.log(e)},//data 賦值changeCountHandler(e){this.setData({countNum:this.data.countNum+1})}
})

知識(shí)點(diǎn)7：事件傳參

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

<!-- 如果傳遞數(shù)字需要用{{}}包括，否則默認(rèn)為字符串 -->
<button type="primary" bindtap="eventHandler" data-name="Jeck" data-age="{{18}}">事件傳參</button>

 //data 事件傳參eventHandler(e){console.log(e.target.dataset.name);}

知識(shí)點(diǎn)8：bindinput的語(yǔ)法格式

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

<view>------------------bindinput--------------------</view>
<input bind:tap="inputHandler" placeholder="請(qǐng)輸入"></input>

  //input 事件inputHandler(e){console.log(e)}