Analyse des problèmes des attributs personnalisés HTML5

Lors du transfert de valeurs entre pages et js, nous utilisons souvent data-id=1, puis obtenons la valeur de id via e.target.dataset.id

Aujourd'hui, je ne peux pas obtenir la valeur quand je l'obtiens

Plus tard, j'ai découvert que l'objet e avait les attributs currentTarget et target, et que l'ensemble de données est dans currentTarget, donc la valeur correcte est obtenue via e.currentTarget.dataset.id .

De plus, il est préférable de ne pas utiliser la casse camel pour nommer data-id=1, tel que : data-Id=1 , sinon la valeur risque de ne pas être obtenue parfois.

Il est courant de voir des définitions d'attribut commençant par data- sur les sites Web. Bien que le W3C ne le reconnaisse pas, le dernier HTML5 stipule que data- est raisonnable. En HTML5, tout ce qui commence par data- est un attribut personnalisé, qui est généralement utilisé pour l'implémentation. Certains éléments qui ne sont pas clairement définis en HTML appliquent au code des attributs définis par l'utilisateur.

Les événements sont la méthode de communication de la couche 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 d'événement peuvent contenir des informations supplémentaires, telles que l'identifiant, l'ensemble de données, les touches.

Liez un gestionnaire d'événements au 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.

 <view id=tapTest data-hi=WeChat bindtap=tapName> Cliquez sur moi </view>

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

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

Vous pouvez voir que les informations déconnectées sont à peu près les suivantes :

 { type :tap, timeStamp :895, cible : { id : tapTest, ensemble de données : { hi:WeChat } }, currentTarget : { id : tapTest, ensemble de données : { hi:WeChat } }, détail : { x :53, y : 14 }, touche :[{ identifiant:0, pageX:53, pageY:14, clientX:53, clientY:14 }], changesTouches :[{ identifiant :0, pageX:53, pageY:14, clientX:53, clientY:14 }]}

Répondre aux événements à l'aide des fonctions WXS

Ce qui précède est l'analyse du problème des attributs personnalisés HTML5 introduits par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !