WeChat ミニ プログラム チュートリアル イベント

イベントとは

イベントはビュー層からロジック層への通信方法です。

イベントは、ユーザーの行動をロジック層にフィードバックして処理できます。

イベントはコンポーネントにバインドでき、トリガーイベントに達すると、ロジック層の対応するイベント処理関数が実行されます。

イベント オブジェクトは、ID、データセット、タッチなどの追加情報を運ぶことができます。

イベントの使用方法

コンポーネント内でイベントハンドラー関数をバインドします。

bindtap など、ユーザーがコンポーネントをクリックすると、対応するイベント処理関数がページの対応するページで見つかります。

5980c8c1f9be4deb05f4fc274a72a9ff Click me! de5f4c1163741e920c998275338d29b2

対応するページ定義に対応するイベント処理関数を記述します。パラメータはeventです。 。

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

ログ情報はおおよそ次のとおりであることがわかります

{
"type": "tap",
"timeStamp": 1252,
"target": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"currentTarget": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"touches": [{
 "pageX": 30,
 "pageY": 12,
 "clientX": 30,
 "clientY": 12,
 "screenX": 112,
 "screenY": 151
}],
"detail": {
 "x": 30,
 "y": 12
}
}

イベントの詳細な説明

イベントの分類

イベントはバブリングイベントと非バブリングイベントに分けられます

1.コンポーネントがトリガーされた後、イベントは親ノードに渡されます。

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

WXML バブリングイベントリスト:

タイプ トリガー条件

touchstart 指タッチ

touchmove 指タッチ後の移動

touchcancel 着信通知、ポップアップウィンドウなどの指タッチ操作の中断

touchend 指タッチアクション 終了

tap 指タッチ後に離れる

longtap 指タッチ後 350ms を超えて離れる

注: 上記の表に加えて、他のコンポーネントのカスタム イベントは、083e68671e9c9ab23fe96adc8139d114、0f0306f9b187f2e363126bc29c8b1420の入力イベント、f22ed720d2ae070222ab6f087b345d61のスクロールイベント(詳細は各コンポーネントを参照)

イベントバインディングの書き方は同じですコンポーネントの属性 (キーと値の形式)。

key は、bind または catch で始まり、bindtap、catchtouchstart などのイベントの種類に続きます。

value は文字列であり、対応するページで同じ名前の関数を定義する必要があります。そうしないと、イベントがトリガーされたときにエラーが報告されます。

bind イベント バインディングは、バブリング イベントが上方にバブリングすることを妨げませんが、catch イベント バインディングは、バブリング イベントが上方にバブリングすることを防ぐことができます。

以下の例では、内側のビューをクリックすると、handleTap1 と handleTap2 が連続してトリガーされます (タップ イベントが中央のビューまでバブルアップし、中央のビューはタップ イベントのバブルを妨げ、親ノードに渡されなくなるためです) ) 中央のビューをクリックすると handleTap2 がトリガーされ、外側のビューをクリックすると handleTap1 がトリガーされます。

<view id="outter" bindtap="handleTap1">  
 outer view  
 <view id="middle" catchtap="handleTap2">  
 middle view  
 <view id="inner" bindtap="handleTap3">  
  inner view  
 </view>  
 </view>  
</view>

Event object

特に指定がない限り、コンポーネントがイベントをトリガーすると、ロジック層はイベント ハンドラーをバインドしてイベント オブジェクトを受け取ります。

イベントオブジェクトの属性リスト:

属性タイプ説明

type String イベントタイプ

timeStamp Integer イベント生成時のタイムスタンプ

target Object イベントをトリガーしたコンポーネントのいくつかの属性値のコレクション

currentTarget オブジェクト 現在のコンポーネントの一部 属性値コレクション

touches 配列 タッチイベント、タッチポイント情報の配列

detail オブジェクト 追加情報

一般イベントタイプ

timeStamp

ページから経過したミリ秒数イベントがトリガーされるまで開かれていました。

target

イベントをトリガーするソースコンポーネント。



プロパティの説明

id イベント ソース コンポーネントの ID

dataset イベント ソース コンポーネント上の data- で始まるカスタム プロパティのコレクション

offsetLeft, offsetTop イベント ソース コンポーネントの座標系でのオフセット

currentTarget

イベントがバインドされている現在のコンポーネント。



属性の説明

id 現在のコンポーネントのID

dataset 現在のコンポーネント上のデータで始まるカスタム属性のコレクション

offsetLeft、offsetTop 現在のコンポーネントの座標系でのオフセット

説明: target と currentTarget は上記の例を参照できます。内側のビューをクリックすると、handleTap3 で受け取ったイベント オブジェクト target と currentTarget は両方とも内側であり、handleTap2 で受け取ったイベント オブジェクト target は内側であり、currentTarget は middle

dataset

です。データはコンポーネントで定義でき、これらのデータはイベントを通じて SERVICE に渡されます。 書き方： data- から始まり、複数の単語はハイフン - で結ばれ、data-要素型などの大文字は使用できません（大文字は自動的に小文字に変換されます）。 最後に、ハイフンはキャメルケースに変換されます。イベント.ターゲット.データセットの要素タイプ。

例:

c236ff3cba975502f58c276049e15151/view>

Page({  
 bindViewTap:function(event){  
 event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法  
 event.target.dataset.alphabeta == 2 // 大写会转为小写  
 }  
})

touches

touches是一个触摸点的数组，每个触摸点包括以下属性：

      属性                     说明

pageX,pageY    距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴    

clientX,clientY    距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴    

screenX,screenY    距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴    

特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

以上就是微信小程序 教程之事件的内容，更多相关内容请关注PHP中文网（www.php.cn）！