微信ウィジェットチュートリアルのイベント

シリーズ記事:
微信小プログラム教程のWXSS微信小プログラム教程の引用微信小プログラム教程のイベント微信小プログラム教程のテンプレート微信小プログラム教程のリストレンダリング微信小プログラム教程の条件レンダリング微信小プログラム教程のデータバインド微信小プログラム教程のWXML
イベントとは

イベントは、階層から論理層への通信方式である.

イベントは、ユーザの行動を論理層にフィードバックして処理することができる.

イベントは、コンポーネントにバインドされ、トリガイベントに達すると、論理層内の対応するイベント処理関数が実行される.

イベントオブジェクトは、id、dataset、touchesなどの追加情報を携帯することができる.

イベントの使用方法
コンポーネントにイベント処理関数をバインドします.
bindtapのように、ユーザーがコンポーネントをクリックすると、ページに対応するPageに対応するイベント処理関数が見つかります.
Click me!
対応するPage定義に対応するイベント処理関数を書きます.パラメータは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
指が触れたら350 msを超えて離れます
注意:上記の表以外のコンポーネントカスタムイベントは、submitイベント、inputイベント、scrollイベントなどの非バブルイベントです(各コンポーネントを参照).
イベントバインド
イベントバインドの書き方は、key、valueの形式でコンポーネントのプロパティと同じです.
keyはbindまたはcatchで始まり、bindtap、catchtouchstartなどのイベントのタイプに続く.
valueは文字列で、対応するPageで同じ名前の関数を定義する必要があります.さもないと、イベントがトリガーされたときにエラーが発生します.
bindイベントバインドはバブルイベントの上方へのバブルを阻止せず、catchイベントバインドはバブルイベントの上方へのバブルを阻止することができる.
次の例では、inner viewをクリックすると、handleTap 1とhandleTap 2が前後してトリガーされ(tapイベントはmiddle viewにバブルし、middle viewはtapイベントのバブルを阻止し、親ノードに渡さない)、middle viewをクリックするとhandleTap 2がトリガーされ、outter viewをクリックするとhandleTap 1がトリガーされます.

 outer view
 
 middle view
 
  inner view
 
 

イベントオブジェクト
特に説明がない場合、コンポーネントがイベントをトリガーすると、論理レイヤがイベントをバインドする処理関数によってイベントオブジェクトが受信されます.
イベント・オブジェクトのプロパティ・リスト:
ツールバーの
を選択します.
説明
type
String
イベントのタイプ
timeStamp
Integer
イベント生成時のタイムスタンプ
target
Object
イベントをトリガーするコンポーネントのプロパティ値のセット
currentTarget
Object
現在のコンポーネントのプロパティ値のセット
touches
Array
タッチイベント、タッチポイント情報の配列
detail
Object
追加情報
汎用イベントタイプ
timeStamp
このページは、イベントがトリガーされるまでのミリ秒数を開きます.
target
イベントをトリガーするソースコンポーネント.
ツールバーの
説明
id
イベントソースコンポーネントのid
dataset
イベントソースコンポーネント上のdata-先頭のカスタム属性からなるセット
offsetLeft, offsetTop
イベントソースコンポーネントの座標系におけるオフセット量
currentTarget
イベントバインドの現在のコンポーネント.
ツールバーの
説明
id
現在のコンポーネントのid
dataset
現在のコンポーネント上のdata-先頭のカスタム属性からなるセット
offsetLeft, offsetTop
現在のコンポーネントの座標系におけるオフセット量
説明:targetとcurrentTargetは、前例のinner viewをクリックすると、handleTap 3が受信したイベントオブジェクトtargetとcurrentTargetはいずれもinnerであり、handleTap 2が受信したイベントオブジェクトtargetはinnerであり、currentTargetはmiddleである
dataset
コンポーネントでは、イベントを介してSERVICEに渡されるデータを定義できます.書き方:data-で始まり、複数の単語がハイフネーション-リンクされ、大文字(大文字は自動的に小文字に変わる)でdata-element-typeのように、最終的にevent.target.DatasetではハイフンをアルパカelementTypeに変換します.
例:
DataSet Test

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軸とする
フォームコンポーネントのコミットイベントなどの特殊なイベントがユーザーの入力を運ぶデータ、メディアのエラーイベントがエラー情報を運ぶデータは、コンポーネント定義の各イベントの定義を参照してください.
読書に感謝して、みんなを助けることができることを望んで、みんなの当駅に対する支持に感謝します!