【微信小程式】事件綁定

🔥系列專欄：微信小程式

🎉歡迎關注👀點贊👍收藏⭐留言📝

🥇個人首頁：hacker_demo的51CTO部落格

💬個人格言：不斷的翻越一座又一座的高山，那樣的人生才是我想要的。這一馬平川，一眼見底的活，我不想要,我的人生，我自己書寫，餘生很長，請多關照，我的人生，敬請期待💖💖💖

(事件綁定)

什麼是事件

事件是渲染層到邏輯層的通訊方式。通過事件可以将使用者在渲染層産生的形式，回報到邏輯層進行業務的處理。

小程式中常用的事件

類型	綁定方式	事件描述
tap	bindtap或bind:tap	手指觸摸後馬上離開，類似于HTML中的click事件
input	bindinput或bind:input	文本框的輸入事件
change	bindchange或bind:change	狀态改變時觸發

事件對象的屬性清單

屬性	類型	說明
type	Spring	事件類型
timeStamp	Integer	頁面打開到觸發事件所經過的毫秒數
target	Object	觸發事件的元件的一些屬性值集合
currentTarget	Object	目前元件的一些屬性值集合
detail	Object	額外的資訊
touches	Array	觸摸事件，目前停留在螢幕中的觸摸點資訊的數組
changedTouches	Array	觸摸事件，目前變化的觸摸點資訊的數組

target和currentTarent的差別

target是觸發該事件的源頭元件，而currentTarget則是目前事件所綁定的元件。舉例如下：

<view class="out-view" bindtap="outHandler">
    <button type="primary">按鈕</button>
</view>
           

點選内部的按鈕時，點選事件以冒泡的方式向外擴散，也會觸發外層view的tap事件處理函數。

此時，對于外層的view來說：

e.target指向的是觸發事件的源頭元件，是以，e.target是内部的按鈕元件

e.currentTarget指向的是目前正在觸發事件的那個元件，是以，e.currentTarget是目前的view元件

bindtap的文法格式

在小程式中，不存在HTML中的onclick滑鼠點選事件，而通過tap事件來響應使用者的觸摸行為。

通過bindtap，可以為元件綁定tap觸摸事件，文法如下：

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

在頁面的.js檔案中定義對應的事件處理函數，事件參數通過形參event（一般簡寫為e）來接收：

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

✅每按一次按鈕就會在終端列印一次事件參數對象，就會觸發手指的觸摸事件。

結束語🥇