WeChatアプレットイベントのバインドとパラメータ転送

バインドされたイベント

公式サイトドキュメント

bindキーワードは、アプレットでイベントをバインドするために使用され、一般的なイベントはタップし、多くのコンポーネントには、入力コンポーネントのbindinputラジオグループコンポーネントのbindchangeなど、独自の対応するイベントがあります。

bindtap

index.wxml index.js

<view bindtap="add">点击我</view>

Page({  
data: {
    message:"helloWord",
    num:'even',
  },
add:function(){
    console.log('aaa')
    console.log(this.data.message)
    this.setData({
      message:'你好，小程序'
    })
  }
)}

this.setDataはメッセージの値を変更します

イベントパラメータ

カスタム属性を介してイベント関数にパラメーターを渡す

index.wxml index.js

<view bindtap="add2" data-value="{
   
   {'hello'}}">点击我  自定义属性传参数</view>

 add2:function(e){
    console.log(e)
  },

イベントがバブリングするのを防ぎます

index.wxml index.js

<view bindtap="fun1">
  fun1
  <view bindtap="fun2">
    fun2
    <view bindtap="fun3"> fun3</view>
  </view>
</view>

  fun1:function(){
    console.log('fun1')
  },
  fun2:function(){
    console.log('fun2')
  },
  fun3:function(){
    console.log('fun3')
  },

fun3をクリックして結果を印刷します

イベントのバインド方法を変更するcatchを使用してイベントをバインドする

index.wxmlindex.jsは変更されていません

<view bindtap="fun1">
  fun1
  <view bindtap="fun2">
    fun2
    <view catchtap="fun3"> fun3</view>
  </view>
</view>

fun3をクリックして結果を印刷します

イベントのバブリングを防ぐことに成功しました

入力イベント

公式ウェブサイトを文書化する

index.wxml index.js

<input type="text" bindinput="changeInput" />

 changeInput:function(){
    console.log(1)
  },

初心者の方は、大物がもっと多くのポインタを与えることができることを願っています.............。