ミニプログラム開発におけるイベントとは何ですか?

WeChat ミニ プログラム開発におけるイベントとは何ですか?イベントの定義から見ると、イベントはビュー層からロジック層への通信方法です。イベントは、ユーザーの行動をロジック層にフィードバックして処理することができ、コンポーネントにバインドされており、トリガー イベントに達すると、ロジック層の対応するイベント処理関数が実行されます。さらに、イベント オブジェクトは、ID、データセット、タッチなどの追加情報を運ぶことができます。

WeChat アプレット フレームワークはロジック層と UI 層分析の設計方法を採用しているため、この設計方法では 2 つの問題を解決する必要があります。ビュー層がロジック層のロジックに応答するということです。データの変化により、ビュー層はユーザーの操作をロジック層にフィードバックします。 WeChat では、開発者がビュー レイヤーとロジック レイヤーを接続できるようにするためのいくつかの構文とルールが定義されています。前者の問題はデータ バインディングによって解決できますが、後者の問題はイベントを使用して解決する必要があります。

イベント バインディング

イベント バインディングを使用して、ユーザー操作への応答を完了します。たとえば、ビュー タグのタップ イベントを処理するには、bindtap = \ を'tapName\' タグ属性。'tapName\' を追加し、.js に TapName 関数を追加します。

//wxml
Click me!
//.js
Page({
tapName:function(event) {
console.log(event)
}
})

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

target: イベントをトリガーしたコンポーネント

currentTarget: 現在のコンポーネント

type: イベント タイプ

timeStamp: タイムスタンプ (ページが開かれてからイベントがトリガーされるまでに経過したミリ秒数)

touches: タッチ ポイントを含む配列 (マルチタッチ コントロール)

changedTouches: 変更されたタッチ ポイントの配列 (マルチタッチ)

detail: 追加のカスタム情報

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

ターゲットと currentTarget に違いがあるのはなぜですか?これは、イベントがバブリング イベントと非バブル イベントの 2 つのカテゴリに分類されるためです

Bubble events: when コンポーネント上のイベントがトリガーされると、イベントは親ノードに渡されます。

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

タップ イベントはバブリング イベントです (これが、上記の例のイベントに currentTarget が含まれている理由です)。

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

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

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

イベントのバブリングを防止する

イベントのバブリングを防止したい場合があります。catchtap などのキャッチ イベント バインディングを使用して、イベントを防止できます。泡立つような行動。

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

//.wxml
我是父亲节点
我是儿子节点
我是孙子节点

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

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

この記事は、http://zixun.jisuapp.cn/xcxkfjc/3059.html

から転載されています。推奨: 「 ミニ プログラム」開発チュートリアル >>

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