Polymer - Ereignisse
Ereignisse werden von den Elementen verwendet, die mit Statusänderungen des DOM-Baums an übergeordnete Elemente kommunizieren können, und verwenden die Standard-DOM-APIs zum Erstellen, Versenden und Abhören von Ereignissen. Dasannotated event listeners werden von Polymer verwendet, das die Ereignis-Listener als kleine Teile der DOM-Vorlage definiert und DOM-Kindern mithilfe von Onevent-Annotationen in der Vorlage hinzugefügt werden kann.
Beispiel
Im folgenden Beispiel werden kommentierte Ereignis-Listener zur Vorlage hinzugefügt. Erstellen Sie eine Datei mit dem Namen index.html und fügen Sie den folgenden Code ein.
<!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>Ausgabe
Navigieren Sie zum Ausführen der Anwendung zum erstellten Projektverzeichnis und führen Sie den folgenden Befehl aus.
polymer serveÖffnen Sie nun den Browser und navigieren Sie zu http://127.0.0.1:8000/. Es folgt die Ausgabe.
Klicken Sie auf den Text, um das Ergebnis in der Konsole anzuzeigen, wie im folgenden Screenshot gezeigt.
Benutzerdefinierte Ereignisse
Benutzerdefinierte Ereignisse können mit dem Standard-CustomEvent-Konstruktor und der dispatchEvent-Methode aus dem Host-Element ausgelöst werden.
Betrachten Sie das folgende Beispiel, das das benutzerdefinierte Ereignis vom Host-Element auslöst. Öffnen Sie die Datei index.html und fügen Sie den folgenden Code hinzu.
<!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>Erstellen Sie nun eine weitere Datei mit dem Namen custom-event.html und geben Sie den folgenden Code ein.
<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>Ausgabe
Führen Sie die Anwendung wie im vorherigen Beispiel gezeigt aus und navigieren Sie zu http://127.0.0.1:8000/. Es folgt die Ausgabe.
Klicken Sie nun auf die Schaltfläche, öffnen Sie die Konsole und sehen Sie den wahren Wert für das benutzerdefinierte Ereignis, wie im folgenden Screenshot gezeigt.
Bewegen Sie sich jetzt mit "Event Retargeting", das das Ziel des Ereignisses angibt, bei dem das Element im selben Bereich wie das Listening-Element dargestellt werden kann. Beispielsweise kann das Ziel als Element im Hauptdokument betrachtet werden, während ein Listener im Hauptdokument und nicht in einem Schattenbaum verwendet wird. Sie können die beziehen Polymer Schatten dom Styling für mehr Erklärung und Beispiel Kapitel.
Gestenereignisse
Gestenereignisse können für Benutzerinteraktionen verwendet werden, die eine bessere Interaktion sowohl auf Touch- als auch auf Mobilgeräten definieren. Das Tap-Ereignis ist beispielsweise Teil von Gestenereignissen, die sowohl auf Mobilgeräten als auch auf Desktop-Geräten konsistent ausgelöst werden.
Sie können sich auf das am Anfang dieses Kapitels erläuterte Beispiel für ein Gestenereignis beziehen, das verwendet on-tap Ereignis, das kommentierte Ereignis-Listener zur Vorlage hinzufügt.
In der folgenden Tabelle sind verschiedene Arten von Gestenereignistypen aufgeführt.
| Sr.Nr. | Ereignistyp & Beschreibung | Eigenschaften |
|---|---|---|
| 1 | down Es gibt an, dass sich der Finger / Knopf nach unten bewegt hat. |
|
| 2 | up Es gibt an, dass der Finger / Knopf nach oben bewegt wurde. |
|
| 3 | tap Es gibt das Auftreten von Auf- und Ab-Aktionen an. |
|
| 4 | track Es gibt das Auftreten von Auf- und Ab-Aktionen an. |
|
Beispiel
Das folgende Beispiel gibt die Verwendung von Gestenereignistypen in der Vorlage an. Erstellen Sie eine Datei mit dem Namen index.html und fügen Sie den folgenden Code ein.
<!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>Erstellen Sie nun eine weitere Datei mit dem Namen gesture-event.html und geben Sie den folgenden Code ein.
<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>Ausgabe
Führen Sie die Anwendung wie im vorherigen Beispiel gezeigt aus und navigieren Sie zu http://127.0.0.1:8081/. Ziehen Sie nun die Maus in das Element. Der Status wird wie im folgenden Screenshot gezeigt angezeigt.
Nachdem Sie die Maus in das Element gezogen haben, wird der Fortschritt der Ereignisverfolgung angezeigt, wie im folgenden Screenshot gezeigt.
Wenn Sie aufhören, die Maus zu ziehen, wird das Tracking-Ereignis für das Element beendet, wie im folgenden Screenshot gezeigt.
