Полимер - События
События используются элементами, которые могут обмениваться данными об изменениях состояния дерева 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 Он указывает, что палец / кнопка переместились вниз. |
|
2 | up Он указывает, что палец / кнопка переместились вверх. |
|
3 | tap Он определяет возникновение действий вверх и вниз. |
|
4 | track Он определяет возникновение действий вверх и вниз. |
|
пример
В следующем примере указывается использование типов событий жестов в шаблоне. Создайте файл с именем 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/. Теперь начните перетаскивать мышь в элемент, он отобразит состояние, как показано на следующем снимке экрана.
После перетаскивания мыши в элемент будет отображаться ход отслеживания событий, как показано на следующем снимке экрана.
Когда вы перестанете перетаскивать мышь, событие отслеживания для элемента прекратится, как показано на следующем снимке экрана.