Polymère - Événements

Les événements sont utilisés par les éléments qui peuvent communiquer avec les changements d'état de l'arborescence DOM aux éléments parents et utilisent les API DOM standard pour créer, distribuer et écouter les événements. leannotated event listeners sont utilisés par Polymer, qui définit les écouteurs d'événements comme de petits morceaux du modèle DOM et peuvent être ajoutés aux enfants DOM à l'aide d'annotations onevent dans le modèle.

Exemple

L'exemple suivant ajoute des écouteurs d'événements annotés dans le modèle. Créez un fichier appelé index.html et mettez-y le code suivant.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href="bower_components/polymer/polymer.html">
      <link rel = "import" href = "annotated-eventlistners.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         //tap event is part of gesture events that fires consistently across both mobile
         //and desktop devices
         <annotated-eventlistners on-tap = "myClick"></annotated-eventlistners>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.myClick =  function(e) {
            console.log('Hello World!!!');
         };
      </script>
   </body>
</html>

Production

Pour exécuter l'application, accédez au répertoire de projet créé et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8000/. Voici la sortie.

Cliquez sur le texte pour voir le résultat dans la console comme indiqué dans la capture d'écran suivante.

Événements personnalisés

Les événements personnalisés peuvent être déclenchés à l'aide du constructeur CustomEvent standard et de la méthode dispatchEvent à partir de l'élément hôte.

Prenons l'exemple suivant qui déclenche l'événement personnalisé à partir de l'élément hôte. Ouvrez le fichier index.html et ajoutez-y le code suivant.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "custom-event.html">
   </head>
   
   <body>
      <custom-event></custom-event>
      <script>
         document.querySelector('custom-event').addEventListener('customValue', function (e) {
            console.log(e.detail.customval); // true
         })
      </script>
   </body>
</html>

Maintenant, créez un autre fichier appelé custom-event.html et incluez le code suivant.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "custom-event">
   <template>
      <h2>Custom Event Example</h2>
      <button on-click = "myClick">Click Here</button>
   </template>
   
   <script>
      Polymer ({
         is: "custom-event", myClick(e) {
            this.dispatchEvent(new CustomEvent('customValue', {detail: {customval: true}}));
         }
      });
   </script>
</dom-module>

Production

Exécutez l'application comme indiqué dans l'exemple précédent et accédez à http://127.0.0.1:8000/. Voici la sortie.

Cliquez maintenant sur le bouton, ouvrez la console et voyez la vraie valeur de l'événement personnalisé, comme illustré dans la capture d'écran suivante.

Passons maintenant au "reciblage d'événement", qui spécifie la cible de l'événement où l'élément peut être représenté dans la même portée que l'élément d'écoute. Par exemple, la cible peut être considérée comme un élément du document principal, tout en utilisant un écouteur dans le document principal, pas dans un arbre d'ombre. Vous pouvez vous référer au chapitre sur le style Polymer shadow dom pour plus d'explications et d'exemples.

Événements gestuels

Les événements gestuels peuvent être utilisés pour les interactions des utilisateurs, qui définissent une meilleure interaction sur les appareils tactiles et mobiles. Par exemple, l'événement tap fait partie des événements gestuels qui se déclenchent de manière cohérente sur les appareils mobiles et de bureau.

Vous pouvez vous référer à l'exemple d'événement de geste expliqué au début de ce chapitre, qui utilise on-tap événement qui ajoute des écouteurs d'événements annotés dans le modèle.

Le tableau suivant répertorie les différents types de types d'événements de mouvement.

N ° Sr.	Type d'événement et description	Propriétés
1	down Il spécifie que le doigt / bouton s'est déplacé vers le bas.	x - Il fournit la coordonnée clientX pour un événement. y - Il fournit la coordonnée clientY pour un événement. sourceEvent - Il spécifie l'action vers le bas provoquée par l'événement DOM.
2	up Il spécifie que le doigt / bouton s'est déplacé vers le haut.	x - Il fournit la coordonnée clientX pour un événement. y - Il fournit la coordonnée clientY pour un événement. sourceEvent - Il spécifie l'action up provoquée par l'événement DOM.
3	tap Il spécifie l'occurrence des actions vers le haut et vers le bas.	x - Il fournit la coordonnée clientX pour un événement. y - Il fournit la coordonnée clientY pour un événement. sourceEvent - Il spécifie l'action de tap provoquée par l'événement DOM.
4	track Il spécifie l'occurrence des actions vers le haut et vers le bas.	x - Il fournit la coordonnée clientX pour un événement. y - Il fournit la coordonnée clientY pour un événement. state - C'est une chaîne de type qui spécifie l'état de suivi. dx - Il effectue horizontalement les modifications en pixels, lorsque vous suivez le premier événement. dy - Il effectue verticalement les modifications en pixels, lorsque vous suivez le premier événement. ddx - Il effectue horizontalement les modifications en pixels, lorsque vous suivez le dernier événement. ddy - Il effectue verticalement les modifications en pixels, lorsque vous suivez le dernier événement. hover() - Il est utilisé pour déterminer l'élément actuellement survolé.

Exemple

L'exemple suivant spécifie l'utilisation de types d'événements de mouvement dans le modèle. Créez un fichier appelé index.html et placez-y le code suivant.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "gesture-event.html">
   </head>
   
   <body>
      <gesture-event></gesture-event>
   </body>
</html>

Maintenant, créez un autre fichier appelé gesture-event.html et incluez le code suivant.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "gesture-event">
   <template>
      <style>
         #box {
            width: 200px;
            height: 200px;
            background: #D7D0B7;
         }
      </style>
      
      <h2>Gesture Event Types Example</h2>
      <div id = "box" on-track = "myClick">{{track_message}}</div>
   </template>
   
   <script>
      Polymer ({
         is: 'gesture-event', myClick: function(e) {
            switch(e.detail.state) {
               case 'start':
               this.track_message = 'Tracking event started...';
               break;
               case 'track':
                  this.track_message = 'Tracking event is in progress... ' +
                  e.detail.x + ', ' + e.detail.y;
               break;
               case 'end':
                  this.track_message = 'Tracking event ended...';
               break;
            }
         }
      });
   </script>
</dom-module>

Production

Exécutez l'application comme indiqué dans l'exemple précédent et accédez à http://127.0.0.1:8081/. Maintenant, commencez à faire glisser la souris dans l'élément, il affichera l'état comme indiqué dans la capture d'écran suivante.

Après avoir fait glisser la souris dans l'élément, il affichera la progression du suivi des événements comme indiqué dans la capture d'écran suivante.

Lorsque vous arrêtez de faire glisser la souris, cela met fin à l'événement de suivi sur l'élément comme indiqué dans la capture d'écran suivante.

↰ Previous page Next page ↱

Polymère - Événements

Exemple

Production

Événements personnalisés

Production

Événements gestuels

Exemple

Production

Tutoriel Polymer