微信小程序事件綁定基本語(yǔ)法示例詳解
更新時(shí)間：2025年04月11日 09:06:10 作者：@程序員ALMJ
這篇文章主要介紹了微信小程序事件綁定基本語(yǔ)法示例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
微信小程序使用 bind 或 catch 前綴綁定事件，語(yǔ)法如下：
<組件 bind事件名="處理函數(shù)" catch事件名="處理函數(shù)"></組件>
bind：事件綁定，允許事件冒泡（向父組件傳遞）。catch：事件綁定，阻止事件冒泡（不會(huì)向父組件傳遞）。
一、常見(jiàn)事件類型
| 事件名 | 說(shuō)明 | 適用組件 |
|---|---|---|
tap | 點(diǎn)擊事件 | view, button |
input | 輸入框內(nèi)容變化 | input, textarea |
submit | 表單提交 | form |
scroll | 滾動(dòng)事件 | scroll-view |
longpress | 長(zhǎng)按事件（350ms） | view, button |
二、事件綁定示例
1. 點(diǎn)擊事件（bindtap / catchtap）
<!-- 點(diǎn)擊事件（允許冒泡） --> <view bindtap="handleTap">點(diǎn)擊我</view> <!-- 阻止冒泡 --> <view catchtap="handleNoBubbleTap">點(diǎn)擊我（不冒泡）</view>
Page({
handleTap() {
console.log("點(diǎn)擊事件觸發(fā)");
},
handleNoBubbleTap() {
console.log("點(diǎn)擊事件觸發(fā)，但不會(huì)冒泡");
}
});2. 輸入事件（bindinput）
<input bindinput="handleInput" placeholder="輸入內(nèi)容" />
Page({
handleInput(e) {
console.log("輸入內(nèi)容：", e.detail.value);
}
});3. 表單提交（bindsubmit）
<form bindsubmit="handleSubmit"> <input name="username" placeholder="用戶名" /> <button form-type="submit">提交</button> </form>
Page({
handleSubmit(e) {
console.log("表單數(shù)據(jù)：", e.detail.value);
}
});三、事件對(duì)象（event）
事件處理函數(shù)的參數(shù) event 包含以下關(guān)鍵屬性：
| 屬性 | 說(shuō)明 |
|---|---|
type | 事件類型（如 tap, input） |
target | 觸發(fā)事件的組件（原始事件源） |
currentTarget | 當(dāng)前綁定事件的組件 |
detail | 額外信息（如輸入框的值） |
timeStamp | 事件觸發(fā)時(shí)間戳 |
touches | 觸摸點(diǎn)信息（多指觸控） |
獲取 data-* 自定義數(shù)據(jù)
<view data-id="123" bindtap="handleDataTap">點(diǎn)擊獲取 data-id</view>
Page({
handleDataTap(e) {
const id = e.currentTarget.dataset.id; // 123
console.log("data-id:", id);
}
});四、阻止事件冒泡（catch vs bind）
bind：允許事件向上冒泡（父組件也會(huì)觸發(fā)相同事件）。catch：阻止事件冒泡（僅當(dāng)前組件觸發(fā)）。
示例
<view bindtap="parentTap"> <view catchtap="childTap">點(diǎn)擊我（不會(huì)觸發(fā)父組件的 tap）</view> </view>
Page({
parentTap() {
console.log("父組件點(diǎn)擊"); // 不會(huì)執(zhí)行（因?yàn)樽咏M件用了 catchtap）
},
childTap() {
console.log("子組件點(diǎn)擊");
}
});五、自定義組件事件（triggerEvent）
如果使用自定義組件，可以通過(guò) triggerEvent 觸發(fā)父組件的事件：
子組件
Component({
methods: {
handleTap() {
this.triggerEvent("customevent", { data: "Hello" });
}
}
});父組件
<child bindcustomevent="handleCustomEvent" />
Page({
handleCustomEvent(e) {
console.log("自定義事件數(shù)據(jù)：", e.detail.data); // "Hello"
}
});六、總結(jié)
| 場(chǎng)景 | 推薦寫法 |
|---|---|
| 普通點(diǎn)擊事件 | bindtap="handleTap" |
| 阻止冒泡 | catchtap="handleTap" |
| 表單輸入 | bindinput="handleInput" |
| 表單提交 | bindsubmit="handleSubmit" |
| 自定義組件通信 | triggerEvent + bind事件名 |
到此這篇關(guān)于微信小程序事件綁定基本語(yǔ)法的文章就介紹到這了,更多相關(guān)微信小程序事件綁定基本語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文為大家詳細(xì)介紹下禁止截屏，通過(guò)清除剪切板實(shí)現(xiàn)、禁止復(fù)制、禁止右鍵菜單、禁止網(wǎng)頁(yè)另存為等等，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
JavaScript遍歷數(shù)組的三種方法map、forEach與filter實(shí)例詳解
這篇文章主要介紹了JavaScript遍歷數(shù)組的三種方法map、forEach與filter,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)數(shù)組遍歷的map、forEach與filter三種方法相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
一問(wèn)了解JavaScript中的元數(shù)據(jù)
本文主要介紹了一問(wèn)了解JavaScript中的元數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
詳解TypeScript中的箭頭函數(shù)如何實(shí)現(xiàn)重載
這篇文章主要為大家詳細(xì)介紹了TypeScript中的箭頭函數(shù)是如何實(shí)現(xiàn)重載的，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-05-05
在 javascript 中，可以使用 == 來(lái)比較兩個(gè)數(shù)據(jù)是否相等，如果兩個(gè)數(shù)據(jù)的類型不同，那么，將在進(jìn)行轉(zhuǎn)換后進(jìn)行比較2010-04-04
JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布訂閱模式)原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布訂閱模式)原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript觀察者模式概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-07-07
利用原生JavaScript實(shí)現(xiàn)造日歷輪子實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用原生JavaScript實(shí)現(xiàn)造日歷輪子的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript將數(shù)據(jù)轉(zhuǎn)換成整數(shù)的方法
這篇文章主要介紹了JavaScript將數(shù)據(jù)轉(zhuǎn)換成整數(shù)的方法，有需要的朋友可以參考一下2014-01-01
JavaScript獲取數(shù)據(jù)類型的方法詳解
這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識(shí)點(diǎn)、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下2024-02-02
下面小編就為大家?guī)?lái)一篇淺談JS中逗號(hào)運(yùn)算符的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06