ミニプログラム開発の基礎に関するイベント (9)

前述したように、WeChat ミニプログラム フレームワークはロジック層と UI 層を分析する設計手法です

UI 層はロジック層のロジックとデータの変更に対応します
UI層はユーザーの操作をロジック層にフィードバックします

前述のデータバインディングが最初の問題を解決し、イベントが2番目の問題を解決します

イベントとは
イベントはビュー層からのものですロジック層の通信方法に。
イベントはユーザーの行動をロジック層にフィードバックして処理できます。
イベントはコンポーネントにバインドできます。トリガーイベントに達すると、ロジック層の対応するイベント処理関数が実行されます。
イベント オブジェクトは、ID、データセット、タッチなどの追加情報を運ぶことができます。

要約すると、イベントとは何かが起こったことを意味します。通常はユーザーがボタンをクリックしたり、電話画面上で指をスライドさせたりするなど、何らかの操作を実行しました。イベントが発生すると、フレームワークはユーザー操作に応答できるように、イベント処理関数 (存在する場合) を呼び出します。

イベント バインディング

イベント バインディングを通じてユーザー操作への応答を完了します。たとえば、view タグの view标签的tap事件，在标签属性中添加bindtap = 'tapName', 然后在.js中添加tapNametap

イベントを処理するには、タグに bindtap = 'tapName' を追加します。属性 を追加し、.js に tapName 関数を追加します。

//wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

//.js
Page({
  tapName: function(event) {
    console.log(event)
  }
})

event オブジェクトには、イベントに関するデータが含まれています:

target: イベントをトリガーしたコンポーネント
currentTarget:現在のコンポーネント
type: イベント タイプ
timeStamp: タイムスタンプ (ページが開かれてからイベントがトリガーされるまでに経過したミリ秒数)
touches: タッチ ポイントを含む配列 (マルチタッチ)
changedTouches: 変更されたタッチポイント 配列 (マルチタッチ)
detail: 追加のカスタム情報

バブルイベントと非バブルイベント

なぜtargetとcurrentTargetがあるのでしょうか？イベントの分類 バブル イベント と 非バブル イベント

バブル イベントの 2 つのタイプがあります: コンポーネント上のイベントがトリガーされると、イベントは親ノードに配信されます。

非バブリング イベント: コンポーネント上のイベントがトリガーされると、イベントは親ノードに配信されません。

tap はバブリング イベントです (これが、上の例の event に currentTarget
が含まれている理由です)。 -------- |----------|
| タッチスタート | タッチ移動 | タッチキャンセル |通話リマインダーなどの中断 | タッチエンド | 指が触れた後、すぐに離れる |

バブルが必要な理由 イベント

バブリング イベントを使用すると、一部の機能をより便利に実装できます。

たとえば、プログラムにはユーザーのアバターと名前を含むビューがあり、ユーザーがアバターまたは名前をクリックすると、ユーザーの詳細ページが表示されます。バブリング イベントがない場合は、アバターと名前のクリック イベントを処理する必要があります。後は、コンポーネントを外側のレイヤーでラップし、コンポーネントのイベントを処理するだけです。

イベントのバブリングを防ぐ

場合によっては、

catchtap

などの

catch イベント バインディング

を使用して、イベントのバブリングを防ぐことができます。

次のコード例を使用して、バブリング イベントについての理解を深めることができます

//.wxml
<view id="outter" bindtap="handleTapOutter">
  我是父亲节点
  <view id="middle" catchtap="handleTapMiddle">
    我是儿子节点
    <view id="inner" bindtap="handleInner">
      我是孙子节点
    </view>
  </view>
</view>

//.js
Page({
  handleTapOutter: function(event) {
    console.log("父亲节点被点击")
  },
  handleTapMiddle: function(event) {
    console.log("儿子节点被点击")
  },
  handleInner: function(event) {
    console.log("孙子节点被点击")
  },
})

すべてのレベルでノードのタップ イベント バインディング メソッドを変更して、出力ログにどのような変更が発生するかを確認してください。

以上がミニプログラム開発の基礎に関するイベント (9)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。