Polimer - wydarzenia

Zdarzenia są używane przez elementy, które mogą komunikować się ze zmianami stanu drzewa DOM do elementów nadrzędnych i używają standardowych interfejsów API DOM do tworzenia, wysyłania i nasłuchiwania zdarzeń. Plikannotated event listeners są używane przez Polymer, który definiuje detektory zdarzeń jako małe fragmenty szablonu DOM i mogą być dodawane do elementów potomnych DOM przy użyciu adnotacji onevent w szablonie.

Przykład

Poniższy przykład dodaje do szablonu detektory zdarzeń z adnotacjami. Utwórz plik o nazwie index.html i umieść w nim następujący kod.

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

Wynik

Aby uruchomić aplikację, przejdź do utworzonego katalogu projektu i uruchom następujące polecenie.

polymer serve

Teraz otwórz przeglądarkę i przejdź do http://127.0.0.1:8000/. Poniżej będzie wynik.

Kliknij tekst, aby zobaczyć wynik w konsoli, jak pokazano na poniższym zrzucie ekranu.

Zdarzenia niestandardowe

Zdarzenia niestandardowe można wyzwalać za pomocą standardowego konstruktora CustomEvent i metody dispatchEvent z elementu hosta.

Rozważmy następujący przykład, który wyzwala zdarzenie niestandardowe z elementu hosta. Otwórz plik index.html i dodaj do niego następujący kod.

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

Teraz utwórz kolejny plik o nazwie custom-event.html i dołącz następujący kod.

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

Wynik

Uruchom aplikację, jak pokazano w poprzednim przykładzie, i przejdź do http://127.0.0.1:8000/. Poniżej będzie wynik.

Teraz kliknij przycisk, otwórz konsolę i zobacz prawdziwą wartość zdarzenia niestandardowego, jak pokazano na poniższym zrzucie ekranu.

Teraz porusza się z „retargetingiem zdarzeń”, które określa cel zdarzenia, w którym element może być reprezentowany w tym samym zakresie, co element nasłuchujący. Na przykład cel można traktować jako element w dokumencie głównym, podczas korzystania z nasłuchiwania w dokumencie głównym, a nie w drzewie cienia. Można odwołać się cień Polymer dom stylizacji rozdział o więcej wyjaśnień i przykład.

Wydarzenia związane z gestami

Zdarzenia gestów mogą być używane do interakcji użytkownika, które definiują lepszą interakcję zarówno na urządzeniach dotykowych, jak i mobilnych. Na przykład zdarzenie dotknięcia jest częścią zdarzeń związanych z gestami, które są konsekwentnie uruchamiane zarówno na urządzeniach mobilnych, jak i stacjonarnych.

Możesz odnieść się do przykładu zdarzenia gestów wyjaśnionego na początku tego rozdziału, w którym używa się on-tap zdarzenie, które dodaje do szablonu detektory zdarzeń z adnotacjami.

W poniższej tabeli wymieniono różne typy zdarzeń związanych z gestami.

Sr.No.	Typ i opis wydarzenia	Nieruchomości
1	down Określa, że palec / przycisk przesunął się w dół.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynat klienta na wydarzenie. sourceEvent - Określa działanie w dół spowodowane zdarzeniem DOM.
2	up Określa, że palec / przycisk został przesunięty w górę.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynat klienta na wydarzenie. sourceEvent - Określa działanie w górę spowodowane zdarzeniem DOM.
3	tap Określa występowanie działań w górę iw dół.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynat klienta na wydarzenie. sourceEvent - Określa akcję tap spowodowaną zdarzeniem DOM.
4	track Określa występowanie działań w górę iw dół.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynat klienta na wydarzenie. state - Jest to ciąg typu, który określa stan śledzenia. dx - Poziomo wprowadza zmiany w pikselach podczas śledzenia pierwszego zdarzenia. dy - W pionie wprowadza zmiany w pikselach, gdy śledzisz pierwsze zdarzenie. ddx - Poziomo wprowadza zmiany w pikselach, gdy śledzisz ostatnie zdarzenie. ddy - W pionie wprowadza zmiany w pikselach, kiedy śledzisz ostatnie zdarzenie. hover() - Służy do określenia aktualnie najechanego elementu.

Przykład

Poniższy przykład określa użycie typów zdarzeń gestów w szablonie. Utwórz plik o nazwie index.html i umieść w nim następujący kod.

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

Teraz utwórz kolejny plik o nazwie gest-event.html i dołącz następujący kod.

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

Wynik

Uruchom aplikację, jak pokazano w poprzednim przykładzie, i przejdź do http://127.0.0.1:8081/. Teraz zacznij przeciągać myszą w elemencie, wyświetli stan, jak pokazano na poniższym zrzucie ekranu.

Po przeciągnięciu myszą w element pokaże postęp śledzenia zdarzeń, jak pokazano na poniższym zrzucie ekranu.

Kiedy przestaniesz przeciągać mysz, zakończy to zdarzenie śledzenia na elemencie, jak pokazano na poniższym zrzucie ekranu.