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

События используются элементами, которые могут взаимодействовать с изменениями состояния дерева DOM с родительскими элементами и используют стандартные API-интерфейсы DOM для создания, отправки и прослушивания событий. Слушатели аннотированных событий используются 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 из элемента host.

Рассмотрим следующий пример, который запускает пользовательское событие из элемента host. Откройте файл 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/ . Ниже будет вывод.

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

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

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

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

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

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

Sr.No.	Тип события и описание	свойства
1	вниз Это указывает, что палец / кнопка сместились вниз.	x — Предоставляет координату clientX для события. y — предоставляет клиентскую координату для события. sourceEvent — определяет действие сбоя, вызванное событием DOM.
2	вверх Это указывает на то, что палец / кнопка переместился вверх.	x — Предоставляет координату clientX для события. y — предоставляет клиентскую координату для события. sourceEvent — определяет действие up, вызванное событием DOM.
3	нажмите Он определяет возникновение действий вверх и вниз.	x — Предоставляет координату clientX для события. y — предоставляет клиентскую координату для события. sourceEvent — определяет действие касания, вызванное событием DOM.
4	трек Он определяет возникновение действий вверх и вниз.	x — Предоставляет координату clientX для события. y — предоставляет клиентскую координату для события. состояние — это строка типа, которая определяет состояние отслеживания. dx — Горизонтально вносит изменения в пиксели, когда вы отслеживаете первое событие. dy — Вертикально вносит изменения в пикселях при отслеживании первого события. ddx — Горизонтально вносит изменения в пикселях, когда вы отслеживаете последнее событие. ddy — Вертикально вносит изменения в пикселях при отслеживании последнего события. hover () — используется для определения текущего находящегося элемента.

вниз

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

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

y — предоставляет клиентскую координату для события.

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

вверх

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

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

y — предоставляет клиентскую координату для события.

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

нажмите

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

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

y — предоставляет клиентскую координату для события.

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

трек

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

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

y — предоставляет клиентскую координату для события.

состояние — это строка типа, которая определяет состояние отслеживания.

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>

Теперь создайте другой файл с именем жестом-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/ . Теперь начните перетаскивать мышь в элементе, он отобразит состояние, как показано на следующем скриншоте.

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

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

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

пример

Выход

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

Выход

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

пример

Выход

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности