Événement du didacticiel du mini-programme WeChat

Que sont les événements ?

Les événements sont la méthode de communication de la couche de visualisation à la couche logique.

Les événements peuvent renvoyer le comportement de l'utilisateur à la couche logique pour traitement.

Les événements peuvent être liés aux composants. Lorsque l'événement déclencheur est atteint, la fonction de traitement d'événement correspondante dans la couche logique sera exécutée.

Les objets événement peuvent contenir des informations supplémentaires, telles que l'identifiant, l'ensemble de données, les touches.

Comment utiliser les événements

Lier une fonction de gestionnaire d'événements dans le composant.

Par exemple, bindtap, lorsque l'utilisateur clique sur le composant, la fonction de traitement d'événement correspondante se retrouvera dans la page correspondante de la page.

b6aa15a7f7dc64081d41ada51964248f Cliquez sur moi de5f4c1163741e920c998275338d29b2

Écrivez dans la définition de la page correspondante La correspondante fonction de traitement d'événements, le paramètre est événement.

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

Vous pouvez voir que les informations du journal sont à peu près les suivantes

{
"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
}
}

Explication détaillée des événements

Classification des événements

Les événements sont divisés en événements bouillonnants et événements non bouillonnants

1. Événements bouillonnants : lorsqu'un événement sur un composant est déclenché, l'événement sera transmis au nœud parent.

2. Événements sans bulle : Lorsqu'un événement sur un composant est déclenché, l'événement ne sera pas transmis au nœud parent.

Liste des événements bouillonnants WXML :

Type Condition de déclenchement

touchstart Toucher du doigt

touchmove Déplacer le doigt après le toucher

touchcancel L'action tactile du doigt est interrompue, comme un rappel d'appel entrant, une fenêtre contextuelle

touchend L'action tactile du doigt se termine

appuyez sur Toucher le doigt, puis quittez, quittez après plus de 350 ms

Remarque : en plus du tableau ci-dessus, d'autres événements personnalisés de composants sont des événements sans bulles, tels que l'événement de soumission de e8b36d49ce73ede15e584e9dd86e79e9 et l'événement d'entrée de 0f0306f9b187f2e363126bc29c8b1420 f22ed720d2ae070222ab6f087b345d61 (voir chaque composant pour plus de détails)

Liaison d'événement

La liaison d'événement est écrite de la même manière que les attributs du composant, sous la forme de key et de value .

la clé commence par bind ou catch, suivi du type d'événement, tel que bindtap, catchtouchstart

la valeur est une chaîne et une fonction du même nom doit être définie dans le fichier correspondant Page. Dans le cas contraire, une erreur sera signalée lors du déclenchement de l'événement.

La liaison d'événement bind n'empêchera pas les événements bouillonnants de bouillonner vers le haut, et la liaison d'événement catch peut empêcher les événements bouillonnants de bouillonner vers le haut.

Comme dans l'exemple ci-dessous, cliquer sur la vue intérieure déclenchera successivement handleTap1 et handleTap2 (car l'événement tap remontera jusqu'à la vue du milieu, et la vue du milieu empêchera l'événement tap de bouillonner et ne sera plus transmis au nœud parent), cliquer sur la vue du milieu déclenchera handleTap2 et cliquer sur la vue externe déclenchera handleTap1.

Objet événement

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

Sauf indication contraire, lorsqu'un composant déclenche un événement, la fonction de gestionnaire liée à l'événement par la couche logique recevra un objet événement.

Liste d'attributs de l'objet événement :

Type d'attribut Description

type String Type d'événement

timeStamp Integer L'horodatage de la génération de l'événement

target Object Une collection de certaines valeurs d'attribut du composant qui a déclenché l'événement

currentTarget Object Une collection de certaines valeurs d'attribut du composant actuel

touches Array Un tableau de événements tactiles, informations sur le point de contact

objet de détail Informations supplémentaires

Type d'événement commun

timeStamp

Le nombre de millisecondes écoulées depuis l'ouverture de la page jusqu'à ce que l'événement soit déclenché.

target

Le composant source qui déclenche l'événement.



Description de l'attribut

id L'identifiant du composant source d'événement

dataset Une collection d'attributs personnalisés commençant par data- sur le composant source d'événement

offsetLeft, offsetTop Décalage dans le système de coordonnées du composant source de l'événement

currentTarget

Le composant actuel auquel l'événement est lié.



Description de l'attribut

id L'identifiant du composant actuel

dataset Une collection d'attributs personnalisés commençant par data- sur le composant actuel

offsetLeft, offsetTop Offset dans le système de coordonnées du composant actuel

Explication : target et currentTarget peuvent faire référence à l'exemple ci-dessus Lorsque l'on clique sur la vue interne, les objets événementiels target et currentTarget reçus par handleTap3 sont. à la fois interne et La cible de l'objet d'événement reçue par handleTap2 est interne et currentTarget est middle

dataset

Les données peuvent être définies dans le composant et ces données seront transmises au SERVICE via. événements. Méthode d'écriture : en commençant par data-, plusieurs mots sont liés par des traits d'union - et ne peuvent pas contenir de lettres majuscules (les lettres majuscules seront automatiquement converties en lettres minuscules) telles que le type d'élément de données. Enfin, les tirets seront convertis en casse chameau. event.target.dataset elementType.

Exemple :

c85cc59a4b1d845e1ce84ca0f19d5da7

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