1.イベントの基本概念

イベントはレイヤー間の通信方法であり、ユーザーの操作をロジック層に伝達する役割を担います。これにより、ユーザーのインタラクションをアプリケーションのビジネスロジックに反映させることができます。

1.1 ミニプログラムの一般的なイベント

1.2 イベントオブジェクトのプロパティ
イベントコールバックがトリガーされると、イベントオブジェクトeventが渡されます。主なプロパティは以下の通りです:

1.3 targetとcurrentTargetの違い
targetはイベントの発起点となるコンポーネントを指し、currentTargetは現在イベントがバインドされているコンポーネントを指します。例を見てみましょう:

<view class="outer-view" bind:tap="outerHandler">
<button type="primary">ボタン</button>
</view>

内部のボタンをクリックすると、イベントはバブリング方式で外側に伝播し、外側のviewのtapイベント処理関数も実行されます。この場合、外側のviewに対しては:
e.targetはイベントの発起点であるボタンコンポーネントを指します
e.currentTargetは現在イベントが処理されているviewコンポーネントを指します

1.4 tapイベントのバインド構文
WeChatミニプログラムでは、HTMLのonclickイベントではなく、tapイベントを使用してユーザーのタッチ操作に応答します。

①bindtapを使用してコンポーネントにtapイベントをバインドする方法:

<button type="primary" bindtap="buttonTapHandler">クリック</button>

②ページの.jsファイルで対応するイベント処理関数を定義します。イベントオブジェクトは引数eで受け取ります:

//ボタンイベント処理関数の定義
buttonTapHandler(e){
    console.log(e)
},

1.5 イベント処理関数でのdata値の更新
this.setData(dataObject)メソッドを呼び出すことで、ページのdata内のデータを更新できます:

data:{
    counter: 0
},
//カウントアップ処理関数
incrementCounter(){
    console.log('処理実行'),
    this.setData({
      counter: this.data.counter + 1
    })
},

1.6 イベントパラメータの受け渡し
ミニプログラムでは、イベントバインド時に直接パラメータを渡すことはできません。代わりにdata-*カスタム属性を使用してパラメータを渡します:

//.wxmlファイル
<button type="primary" bindtap="updateCounter" data-increment="{{3}}">+3</button>
//data
data: {
    counter: 0
},
//.jsファイル
updateCounter(e){
    console.log(e)
    this.setData({
      counter: this.data.counter + e.target.dataset.increment
    })
},

1.7 inputイベントの構文
①テキストボックスの入力イベントにはinputイベントを使用します:

<input bindinput="inputHandler"></input>

②.jsファイルでイベント処理関数を定義します:

inputHandler(e){
//e.detail.valueには入力された最新の値が含まれます
console.log(e.detail.value)
}

1.8 テキストボックスとdataの同期

//テキストボックスの値が変更された時の処理
inputHandler(e){
  this.setData({
  //e.detail.valueで最新の値を取得
  message: e.detail.value
  })
}

テキストボックスの構成:

<input value="{{message}}" bindinput="inputHandler"></input>

messageはdataで定義された変数です:

data: {
    message: "初期値"
}

テキストボックスのスタイル:.wxssファイルで

input{
  border: 1px solid #6495ED;
  margin: 3px;
  padding: 5px;
  border-radius: 3px;	/* 角丸 */
}