Полимер - События

События используются элементами, которые могут обмениваться данными об изменениях состояния дерева DOM с родительскими элементами и используют стандартные API-интерфейсы DOM для создания, отправки и прослушивания событий. Вannotated event listeners используются Polymer, который определяет прослушиватели событий как небольшие фрагменты шаблона DOM и могут быть добавлены к дочерним элементам DOM с помощью аннотаций onevent в шаблоне.

пример

В следующем примере в шаблон добавляются аннотированные прослушиватели событий. Создайте файл с именем index.html и поместите в него следующий код.

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

Вывод

Чтобы запустить приложение, перейдите в каталог созданного проекта и выполните следующую команду.

polymer serve

Теперь откройте браузер и перейдите к http://127.0.0.1:8000/. Ниже будет вывод.

Щелкните текст, чтобы увидеть результат в консоли, как показано на следующем снимке экрана.

Пользовательские события

Пользовательские события могут запускаться с помощью стандартного конструктора CustomEvent и метода dispatchEvent из элемента хоста.

Рассмотрим следующий пример, который запускает настраиваемое событие из ведущего элемента. Откройте файл index.html и добавьте в него следующий код.

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

Теперь создайте еще один файл с именем custom-event.html и включите следующий код.

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

Вывод

Запустите приложение, как показано в предыдущем примере, и перейдите к http://127.0.0.1:8000/. Ниже будет вывод.

Теперь нажмите кнопку, откройте консоль и посмотрите истинное значение для настраиваемого события, как показано на следующем снимке экрана.

Теперь переходим к «перенацеливанию событий», который указывает цель события, где элемент может быть представлен в той же области, что и элемент прослушивания. Например, цель может рассматриваться как элемент в основном документе при использовании слушателя в основном документе, а не в теневом дереве. Вы можете обратиться к главе, посвященной стилю полимерной тени, для получения дополнительных объяснений и примеров.

События жестов

События жеста могут использоваться для взаимодействия с пользователем, что определяет лучшее взаимодействие как на сенсорных, так и на мобильных устройствах. Например, событие касания является частью событий жеста, которые запускаются последовательно как на мобильных, так и на настольных устройствах.

Вы можете сослаться на пример события жеста, описанный в начале этой главы, в котором используется on-tap событие, которое добавляет в шаблон аннотированные прослушиватели событий.

В следующей таблице перечислены различные типы событий жестов.

Sr.No. Тип и описание события Свойства
1

down

Он указывает, что палец / кнопка переместились вниз.

  • x - Предоставляет координату clientX для события.

  • y - Предоставляет координаты клиента для мероприятия.

  • sourceEvent - Он указывает действие, вызванное событием DOM.

2

up

Он указывает, что палец / кнопка переместились вверх.

  • x - Предоставляет координату clientX для события.

  • y - Предоставляет координаты клиента для мероприятия.

  • sourceEvent - Он определяет действие, вызванное событием DOM.

3

tap

Он определяет возникновение действий вверх и вниз.

  • x - Предоставляет координату clientX для события.

  • y - Предоставляет координаты клиента для мероприятия.

  • sourceEvent - Он определяет действие касания, вызванное событием DOM.

4

track

Он определяет возникновение действий вверх и вниз.

  • x - Предоставляет координату clientX для события.

  • y - Предоставляет координаты клиента для мероприятия.

  • state - Это строка типа, определяющая состояние отслеживания.

  • dx - По горизонтали вносит изменения в пикселях, когда вы отслеживаете первое событие.

  • dy - По вертикали вносит изменения в пикселях, когда вы отслеживаете первое событие.

  • ddx - По горизонтали вносит изменения в пикселях, когда вы отслеживаете последнее событие.

  • ddy - Вертикально вносит изменения в пикселях, когда вы отслеживаете последнее событие.

  • hover() - Используется для определения текущего зависшего элемента.

пример

В следующем примере указывается использование типов событий жестов в шаблоне. Создайте файл с именем index.html и поместите в него следующий код.

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

Теперь создайте еще один файл с именем gesture-event.html и включите следующий код.

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

Вывод

Запустите приложение, как показано в предыдущем примере, и перейдите к http://127.0.0.1:8081/. Теперь начните перетаскивать мышь в элемент, он отобразит состояние, как показано на следующем снимке экрана.

После перетаскивания мыши в элемент будет отображаться ход отслеживания событий, как показано на следующем снимке экрана.

Когда вы перестанете перетаскивать мышь, событие отслеживания для элемента прекратится, как показано на следующем снимке экрана.