Polímero - Eventos

Los eventos son utilizados por los elementos que pueden comunicarse con los cambios de estado del árbol DOM a los elementos principales y utilizan las API DOM estándar para crear, enviar y escuchar eventos. losannotated event listeners son utilizados por Polymer, que define los detectores de eventos como pequeños fragmentos de la plantilla DOM y se pueden agregar a los hijos DOM mediante anotaciones onevent en la plantilla.

Ejemplo

El siguiente ejemplo agrega detectores de eventos anotados en la plantilla. Cree un archivo llamado index.html y coloque el siguiente código en él.

<!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>

Salida

Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8000/. Lo siguiente será la salida.

Haga clic en el texto para ver el resultado en la consola como se muestra en la siguiente captura de pantalla.

Eventos personalizados

Los eventos personalizados se pueden activar utilizando el constructor CustomEvent estándar y el método dispatchEvent del elemento host.

Considere el siguiente ejemplo que activa el evento personalizado desde el elemento host. Abra el archivo index.html y agregue el siguiente código en él.

<!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>

Ahora, cree otro archivo llamado custom-event.html e incluya el siguiente código.

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

Salida

Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8000/. Lo siguiente será la salida.

Ahora haga clic en el botón, abra la consola y vea el valor real del evento personalizado como se muestra en la siguiente captura de pantalla.

Ahora avanzando con "retargeting de eventos", que especifica el destino del evento donde el elemento se puede representar en el mismo ámbito que el elemento de escucha. Por ejemplo, el destino se puede considerar como un elemento en el documento principal, mientras se usa un oyente en el documento principal, no en un árbol de sombra. Puede consultar el capítulo de estilo Polymer shadow dom para obtener más explicaciones y ejemplos.

Eventos de gestos

Los eventos de gestos se pueden utilizar para las interacciones del usuario, que definen una mejor interacción tanto en dispositivos táctiles como móviles. Por ejemplo, el evento de toque es parte de los eventos de gestos que se activa de manera constante en dispositivos móviles y de escritorio.

Puede consultar el ejemplo de evento de gesto explicado al principio de este capítulo, que utiliza on-tap evento que agrega detectores de eventos anotados en la plantilla.

La siguiente tabla enumera diferentes tipos de eventos de gestos.

No Señor.	Tipo de evento y descripción	Propiedades
1	down Especifica que el dedo / botón se ha movido hacia abajo.	x - Proporciona la coordenada clientX para un evento. y - Proporciona las coordenadas del cliente para un evento. sourceEvent - Especifica la acción de caída causada por el evento DOM.
2	up Especifica que el dedo / botón se ha movido hacia arriba.	x - Proporciona la coordenada clientX para un evento. y - Proporciona las coordenadas del cliente para un evento. sourceEvent - Especifica la acción activa causada por el evento DOM.
3	tap Especifica la ocurrencia de acciones hacia arriba y hacia abajo.	x - Proporciona la coordenada clientX para un evento. y - Proporciona las coordenadas del cliente para un evento. sourceEvent - Especifica la acción de toque causada por el evento DOM.
4	track Especifica la ocurrencia de acciones hacia arriba y hacia abajo.	x - Proporciona la coordenada clientX para un evento. y - Proporciona las coordenadas del cliente para un evento. state - Es una cadena de tipo que especifica el estado de seguimiento. dx - Realiza horizontalmente los cambios en píxeles, cuando rastrea el primer evento. dy - Realiza verticalmente los cambios en píxeles, cuando rastrea el primer evento. ddx - Realiza horizontalmente los cambios en píxeles, cuando rastrea el último evento. ddy - Realiza verticalmente los cambios en píxeles, cuando rastrea el último evento. hover() - Se utiliza para determinar el elemento suspendido actualmente.

Ejemplo

El siguiente ejemplo especifica el uso de tipos de eventos de gestos en la plantilla. Cree un archivo llamado index.html y coloque el siguiente código en él.

<!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>

Ahora, cree otro archivo llamado gesto-event.html e incluya el siguiente código.

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

Salida

Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8081/. Ahora comience a arrastrar el mouse en el elemento, mostrará el estado como se muestra en la siguiente captura de pantalla.

Después de arrastrar el mouse en el elemento, mostrará el progreso del seguimiento de eventos como se muestra en la siguiente captura de pantalla.

Cuando deje de arrastrar el mouse, finalizará el evento de seguimiento en el elemento como se muestra en la siguiente captura de pantalla.

↰ Previous page Next page ↱