Polimer - Acara
Peristiwa digunakan oleh elemen yang dapat berkomunikasi dengan perubahan status pohon DOM menjadi elemen induk dan menggunakan API DOM standar untuk membuat, mengirim, dan mendengarkan peristiwa. Ituannotated event listeners digunakan oleh Polymer, yang mendefinisikan event listener sebagai potongan kecil dari template DOM dan bisa ditambahkan ke turunan DOM menggunakan anotasi onevent di template.
Contoh
Contoh berikut menambahkan event listener beranotasi di template. Buat file bernama index.html dan masukkan kode berikut di dalamnya.
<!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>Keluaran
Untuk menjalankan aplikasi, buka direktori proyek yang dibuat dan jalankan perintah berikut.
polymer serveSekarang buka browser dan arahkan ke http://127.0.0.1:8000/. Berikut akan menjadi keluarannya.
Klik teks untuk melihat hasilnya di konsol seperti yang ditunjukkan pada gambar layar berikut.
Acara Kustom
Peristiwa khusus dapat dipicu menggunakan konstruktor CustomEvent standar dan metode dispatchEvent dari elemen host.
Pertimbangkan contoh berikut yang memicu peristiwa khusus dari elemen host. Buka file index.html dan tambahkan kode berikut di dalamnya.
<!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>Sekarang, buat file lain bernama custom-event.html dan sertakan kode berikut.
<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>Keluaran
Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya dan navigasikan ke http://127.0.0.1:8000/. Berikut akan menjadi keluarannya.
Sekarang klik tombol, buka konsol, dan lihat nilai sebenarnya untuk acara khusus seperti yang ditunjukkan pada tangkapan layar berikut.
Sekarang berpindah dengan "event retargeting", yang menentukan target acara tempat elemen dapat direpresentasikan dalam cakupan yang sama dengan elemen pendengar. Misalnya, target dapat dianggap sebagai elemen di dokumen utama, saat menggunakan listener di dokumen utama, bukan di pohon bayangan. Anda dapat merujuk bab penataan dom bayangan Polimer untuk penjelasan dan contoh lebih lanjut.
Acara Isyarat
Peristiwa isyarat dapat digunakan untuk interaksi pengguna, yang menentukan interaksi yang lebih baik pada perangkat sentuh dan seluler. Misalnya, peristiwa tap adalah bagian dari peristiwa isyarat yang diaktifkan secara konsisten di perangkat seluler dan desktop.
Anda dapat merujuk contoh untuk peristiwa isyarat yang dijelaskan di awal bab ini, yang menggunakan on-tap acara yang menambahkan pemroses acara beranotasi di template.
Tabel berikut mencantumkan berbagai jenis jenis peristiwa isyarat.
| Sr.No. | Jenis & Deskripsi Acara | Properti |
|---|---|---|
| 1 | down Ini menentukan bahwa jari / tombol telah bergerak ke bawah. |
|
| 2 | up Ini menentukan bahwa jari / tombol telah bergerak ke atas. |
|
| 3 | tap Ini menentukan terjadinya tindakan naik dan turun. |
|
| 4 | track Ini menentukan terjadinya tindakan naik dan turun. |
|
Contoh
Contoh berikut menentukan penggunaan jenis peristiwa isyarat di template. Buat file bernama index.html dan tempatkan kode berikut di dalamnya.
<!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>Sekarang, buat file lain bernama gesture-event.html dan sertakan kode berikut.
<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>Keluaran
Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya dan navigasikan ke http://127.0.0.1:8081/. Sekarang mulailah menyeret mouse di elemen, itu akan menampilkan status seperti yang ditunjukkan pada tangkapan layar berikut.
Setelah menyeret mouse ke dalam elemen, itu akan menunjukkan kemajuan pelacakan peristiwa seperti yang ditunjukkan pada tangkapan layar berikut.
Saat Anda berhenti menyeret mouse, ini akan mengakhiri peristiwa pelacakan pada elemen seperti yang ditunjukkan pada tangkapan layar berikut.
