Polímero - Eventos

Os eventos são usados pelos elementos que podem se comunicar com as mudanças de estado da árvore DOM para os elementos pais e usam as APIs DOM padrão para criar, despachar e ouvir eventos. oannotated event listeners são usados pelo Polymer, que define os ouvintes de evento como pequenos pedaços do modelo DOM e podem ser adicionados aos filhos do DOM usando anotações de um evento no modelo.

Exemplo

O exemplo a seguir adiciona ouvintes de eventos anotados no modelo. Crie um arquivo chamado index.html e coloque o código a seguir nele.

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

Resultado

Para executar o aplicativo, navegue até o diretório do projeto criado e execute o seguinte comando.

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8000/. A seguir será a saída.

Clique no texto para ver o resultado no console, conforme mostrado na captura de tela a seguir.

Eventos Personalizados

Os eventos personalizados podem ser disparados usando o construtor CustomEvent padrão e o método dispatchEvent do elemento host.

Considere o exemplo a seguir que dispara o evento personalizado do elemento host. Abra o arquivo index.html e adicione o seguinte código a ele.

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

Agora, crie outro arquivo chamado custom-event.html e inclua o código a seguir.

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

Resultado

Execute o aplicativo conforme mostrado no exemplo anterior e navegue até http://127.0.0.1:8000/. A seguir será a saída.

Agora clique no botão, abra o console e veja o valor verdadeiro do evento personalizado, conforme mostrado na captura de tela a seguir.

Agora movendo com "retargeting de evento", que especifica o destino do evento onde o elemento pode ser representado no mesmo escopo do elemento de escuta. Por exemplo, o destino pode ser considerado como um elemento no documento principal, ao usar um ouvinte no documento principal, não em uma árvore de sombra. Você pode consultar o capítulo sobre estilo de sombra de polímero para obter mais explicações e exemplos.

Eventos de Gestos

Os eventos de gesto podem ser usados para interações do usuário, que definem uma melhor interação em dispositivos móveis e de toque. Por exemplo, o evento de toque é uma parte dos eventos de gesto que dispara de forma consistente em dispositivos móveis e desktop.

Você pode consultar o exemplo de evento de gesto explicado no início deste capítulo, que usa on-tap evento que adiciona ouvintes de eventos anotados no modelo.

A tabela a seguir lista diferentes tipos de eventos de gesto.

Sr. Não.	Tipo e descrição do evento	Propriedades
1	down Ele especifica que o dedo / botão foi movido para baixo.	x - Fornece a coordenada clientX para um evento. y - Fornece a coordenada do cliente para um evento. sourceEvent - Especifica a ação de inatividade causada pelo evento DOM.
2	up Ele especifica que o dedo / botão foi movido para cima.	x - Fornece a coordenada clientX para um evento. y - Fornece a coordenada do cliente para um evento. sourceEvent - Especifica a ação de ativação causada pelo evento DOM.
3	tap Ele especifica a ocorrência de ações para cima e para baixo.	x - Fornece a coordenada clientX para um evento. y - Fornece a coordenada do cliente para um evento. sourceEvent - Especifica a ação de toque causada pelo evento DOM.
4	track Ele especifica a ocorrência de ações para cima e para baixo.	x - Fornece a coordenada clientX para um evento. y - Fornece a coordenada do cliente para um evento. state - É um tipo de string que especifica o estado de rastreamento. dx - Faz horizontalmente as alterações em pixels, quando você rastreia o primeiro evento. dy - Ele faz as mudanças verticalmente em pixels, quando você rastreia o primeiro evento. ddx - Faz horizontalmente as mudanças em pixels, quando você rastreia o último evento. ddy - Ele faz as mudanças verticalmente em pixels, quando você rastreia o último evento. hover() - É usado para determinar o elemento em foco no momento.

Exemplo

O exemplo a seguir especifica o uso de tipos de eventos de gesto no modelo. Crie um arquivo chamado index.html e coloque o código a seguir nele.

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

Agora, crie outro arquivo denominado gesto-event.html e inclua o código a seguir.

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

Resultado

Execute o aplicativo conforme mostrado no exemplo anterior e navegue até http://127.0.0.1:8081/. Agora comece a arrastar o mouse no elemento, ele exibirá o estado conforme mostrado na imagem a seguir.

Após arrastar o mouse no elemento, ele mostrará o andamento do rastreamento de eventos conforme mostrado na imagem a seguir.

Ao parar de arrastar o mouse, o evento de rastreamento será encerrado no elemento, conforme mostrado na imagem a seguir.