Événements sur les bases du développement de mini-programmes (9)

Comme mentionné précédemment, le framework d'applet WeChat est une méthode de conception qui analyse la couche logique et la couche d'interface utilisateur. Cette méthode de conception doit résoudre deux problèmes

La couche d'interface utilisateur répond aux changements dans la logique. et les données de la couche logique. 🎜>événement
Ensuite, résolvez le deuxième problème

Qu'est-ce qu'un événementLes événements sont la méthode de communication de la couche de vue à 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.

Pour résumer, un événement fait référence à quelque chose qui se passe, généralement l'utilisateur effectue une opération, comme cliquer sur un bouton ou faire glisser un doigt sur l'écran du téléphone. Lorsqu'un événement se produit, le framework appelle la fonction de gestion des événements (le cas échéant) afin qu'elle puisse répondre aux opérations de l'utilisateur.

Liaison d'événement

utilise la liaison d'événement pour compléter la réponse aux opérations de l'utilisateur. Par exemple, pour gérer l'événement

tap

de la balise

, ajoutez , puis ajoutez la fonction

dans .js

l'objet événement contient des données sur l'événement : viewtarget : le composant qui a déclenché l'événement bindtap = 'tapName'tapName

currentTarget : composant actuel

//wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

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

type : type d'événement

timeStamp : horodatage (le nombre de millisecondes écoulées à partir du moment où le la page a été ouverte lorsque l'événement a été déclenché)
touches : un tableau contenant des points de contact (multi-touch)
changedTouches : un tableau de points de contact modifiés (multi-touch) -touch)
détail : Informations personnalisées supplémentaires
Événements de bulle et événements sans bulle
Pourquoi y a-t-il cible
et currentTarget La différence est que les événements sont divisés en deux catégories,

événements bouillonnants

et

événements sans bulles

événements bouillonnants : quand un composant Une fois l'événement déclenché, l'événement sera transmis au nœud parent. Événement sans bulle : lorsqu'un événement sur un composant est déclenché, l'événement ne sera pas transmis au nœud parent. L'événement tap

est un événement bouillonnant (c'est pourquoi le

event

dans l'exemple ci-dessus contient
currentTarget

), et Autre les événements bouillonnants incluent

| Type|Condition de déclenchement|

| ------------- |-------------|| L'action tactile commence | | touchmove | Le doigt bouge après avoir touché | | L'action tactile est interrompue, comme le rappel d'appel entrant, la fenêtre contextuelle | l'action tactile se termine || appuyez sur | Quittez immédiatement après avoir touché le doigt|| appuyez longuement | Quittez après plus de 350 ms après avoir touché le doigt|
Pourquoi avez-vous besoin d'un événement bouillonnant ?

Avec un événement bouillonnant, vous pouvez implémenter certaines fonctions plus facilement.

Par exemple, le programme a une vue qui contient l'avatar et le nom de l'utilisateur. Lorsque l'utilisateur clique sur l'avatar ou le nom, la page de détails de l'utilisateur est accédée. S'il n'y a pas d'événement bouillonnant, vous devez gérer les événements de clic de l'avatar et du nom. Il vous suffit désormais d'envelopper un composant dans la couche externe et de gérer l'événement du composant.

Empêcher le bouillonnement d'événement

Dans certains cas, vous souhaiterez peut-être empêcher l'événement de bouillonner. Vous pouvez utiliser la

liaison d'événement catch

, telle que

catchtap

. , vous pouvez empêcher le comportement bouillonnant des événements.

Vous pouvez utiliser l'exemple de code suivant pour approfondir votre compréhension des événements bouillonnants.

Essayez de modifier la méthode de liaison des événements Tap des nœuds à tous les niveaux pour voir quels changements se produiront dans le journaux de sortie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!