亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序事件綁定基本語法示例詳解

 更新時間:2025年04月11日 09:06:10   作者:@程序員ALMJ  
這篇文章主要介紹了微信小程序事件綁定基本語法示例詳解,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

微信小程序使用 bind 或 catch 前綴綁定事件,語法如下:

<組件 bind事件名="處理函數(shù)" catch事件名="處理函數(shù)"></組件>
  • bind:事件綁定,允許事件冒泡(向父組件傳遞)。
  • catch:事件綁定,阻止事件冒泡(不會向父組件傳遞)。

一、常見事件類型

事件名說明適用組件
tap點擊事件viewbutton
input輸入框內(nèi)容變化inputtextarea
submit表單提交form
scroll滾動事件scroll-view
longpress長按事件(350ms)viewbutton

二、事件綁定示例

1. 點擊事件(bindtap / catchtap)

<!-- 點擊事件(允許冒泡) -->
<view bindtap="handleTap">點擊我</view>
<!-- 阻止冒泡 -->
<view catchtap="handleNoBubbleTap">點擊我(不冒泡)</view>
Page({
  handleTap() {
    console.log("點擊事件觸發(fā)");
  },
  handleNoBubbleTap() {
    console.log("點擊事件觸發(fā),但不會冒泡");
  }
});

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);
  }
});

三、事件對象(event)

事件處理函數(shù)的參數(shù) event 包含以下關(guān)鍵屬性:

屬性說明
type事件類型(如 tapinput
target觸發(fā)事件的組件(原始事件源)
currentTarget當(dāng)前綁定事件的組件
detail額外信息(如輸入框的值)
timeStamp事件觸發(fā)時間戳
touches觸摸點信息(多指觸控)

獲取 data-* 自定義數(shù)據(jù)

<view data-id="123" bindtap="handleDataTap">點擊獲取 data-id</view>
Page({
  handleDataTap(e) {
    const id = e.currentTarget.dataset.id; // 123
    console.log("data-id:", id);
  }
});

四、阻止事件冒泡(catch vs bind)

  • bind:允許事件向上冒泡(父組件也會觸發(fā)相同事件)。
  • catch:阻止事件冒泡(僅當(dāng)前組件觸發(fā))。

示例

<view bindtap="parentTap">
  <view catchtap="childTap">點擊我(不會觸發(fā)父組件的 tap)</view>
</view>
Page({
  parentTap() {
    console.log("父組件點擊"); // 不會執(zhí)行(因為子組件用了 catchtap)
  },
  childTap() {
    console.log("子組件點擊");
  }
});

五、自定義組件事件(triggerEvent)

如果使用自定義組件,可以通過 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é)

場景推薦寫法
普通點擊事件bindtap="handleTap"
阻止冒泡catchtap="handleTap"
表單輸入bindinput="handleInput"
表單提交bindsubmit="handleSubmit"
自定義組件通信triggerEvent + bind事件名

到此這篇關(guān)于微信小程序事件綁定基本語法的文章就介紹到這了,更多相關(guān)微信小程序事件綁定基本語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 當(dāng)前頁禁止復(fù)制粘貼截屏代碼小集

    當(dāng)前頁禁止復(fù)制粘貼截屏代碼小集

    本文為大家詳細(xì)介紹下禁止截屏,通過清除剪切板實現(xiàn)、禁止復(fù)制、禁止右鍵菜單、禁止網(wǎng)頁另存為等等,感興趣的朋友可以參考下哈,希望對大家有所幫助
    2013-07-07
  • JavaScript遍歷數(shù)組的三種方法map、forEach與filter實例詳解

    JavaScript遍歷數(shù)組的三種方法map、forEach與filter實例詳解

    這篇文章主要介紹了JavaScript遍歷數(shù)組的三種方法map、forEach與filter,結(jié)合實例形式詳細(xì)分析了javascript針對數(shù)組遍歷的map、forEach與filter三種方法相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2019-02-02
  • 一問了解JavaScript中的元數(shù)據(jù)

    一問了解JavaScript中的元數(shù)據(jù)

    本文主要介紹了一問了解JavaScript中的元數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 詳解TypeScript中的箭頭函數(shù)如何實現(xiàn)重載

    詳解TypeScript中的箭頭函數(shù)如何實現(xiàn)重載

    這篇文章主要為大家詳細(xì)介紹了TypeScript中的箭頭函數(shù)是如何實現(xiàn)重載的,文中的示例代碼講解詳細(xì),具有一定的參考價值,需要的可以參考一下
    2023-05-05
  • Javascript中的相等與不等運算

    Javascript中的相等與不等運算

    在 javascript 中,可以使用 == 來比較兩個數(shù)據(jù)是否相等,如果兩個數(shù)據(jù)的類型不同,那么,將在進行轉(zhuǎn)換后進行比較
    2010-04-04
  • JavaScript設(shè)計模式之觀察者模式(發(fā)布訂閱模式)原理與實現(xiàn)方法示例

    JavaScript設(shè)計模式之觀察者模式(發(fā)布訂閱模式)原理與實現(xiàn)方法示例

    這篇文章主要介紹了JavaScript設(shè)計模式之觀察者模式(發(fā)布訂閱模式)原理與實現(xiàn)方法,結(jié)合實例形式分析了JavaScript觀察者模式概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2018-07-07
  • 利用原生JavaScript實現(xiàn)造日歷輪子實例代碼

    利用原生JavaScript實現(xiàn)造日歷輪子實例代碼

    這篇文章主要給大家介紹了關(guān)于如何利用原生JavaScript實現(xiàn)造日歷輪子的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • JavaScript將數(shù)據(jù)轉(zhuǎn)換成整數(shù)的方法

    JavaScript將數(shù)據(jù)轉(zhuǎn)換成整數(shù)的方法

    這篇文章主要介紹了JavaScript將數(shù)據(jù)轉(zhuǎn)換成整數(shù)的方法,有需要的朋友可以參考一下
    2014-01-01
  • JavaScript獲取數(shù)據(jù)類型的方法詳解

    JavaScript獲取數(shù)據(jù)類型的方法詳解

    這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識點、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下
    2024-02-02
  • 淺談JS中逗號運算符的用法

    淺談JS中逗號運算符的用法

    下面小編就為大家?guī)硪黄獪\談JS中逗號運算符的用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

最新評論