WeChat ミニプログラムチュートリアルイベント-ミニプログラム開発-php.cn

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

黄舟

リリース： 2017-01-16 15:01:38

オリジナル

1533 人が閲覧しました

イベントとは

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

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

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

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

イベントの使用方法

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

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

Click me!

対応するページ定義に対応するイベント処理関数を記述します。パラメータは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 を超えて離れる

注: 上記の表に加えて、他のコンポーネントのカスタムイベントは、

、の入力イベント、のスクロールイベント(詳細は各コンポーネントを参照)

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

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-要素型などの大文字は使用できません（大文字は自動的に小文字に変換されます）。最後に、ハイフンはキャメルケースに変換されます。イベント.ターゲット.データセットの要素タイプ。

例:

/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）！