Browser Event
Untuk
dapat menghasilkan dokumen HTML yang menarik, modifikasi elemen-elemen dalam
dokumen saja tentu tidak cukup. Terkadang kita memerlukan dokumen yang
interaktif; yang memberikan respon terhadap masukan dari pengguna. Terdapat
banyak jenis masukan dari pengguna yang dapat diakses oleh browser. Penekanan
tombol keyboard adalah masukan. Klik tombol mouse juga adalah masukan.
Bahkan pergerakan mouse juga dapat dihitung sebagai masukan.
Berbagai masukan dari pengguna ini dibaca dan dipantau oleh browser agar
kita dapat mengambil tindakan ketika pengguna memberikan masukan. Karena
masukan dianggap sebagai sesuatu yang dilakukan pengguna, atau dengan kata lain
kejadian ketika dokumen HTML ditampilkan, maka hasil rekaman peristiwa ini
dikenal dengan nama event.
Cara
kerja dari browser event sendiri sangat sederhana. Browser memberikan
kita fasilitas untuk memantau kejadian tertentu pada elemen DOM tertentu. Kita
kemudian dapat memberikan sebuah fungsi kepada browser, yang
nantinya dipanggil ketika peristiwa yang dipantau terjadi. Untuk beberapa
peristiwa, misalnya penekanan tombol keyboard seringkali kita akan memerlukan
informasi tambahan seperti tombol apa yang ditekan pengguna. Untuk
mengakomodasi hal ini browser memberikan objek khusus untuk event yang
dapat kita akses melalui fungsi yang kita berikan ke pemantau kejadian.
Perlu
diketahui juga bahwa event dijalankan dari elemen yang paling
dalam dari DOM, dan kemudian bergerak naik terus sampai ke elemen paling atas
dari DOM (body). Misalkan kita memiliki elemen seperti berikut:
|
1
2
3
4
5
6
|
<p>Sebuah
paragraf dengan list di dalamnya.
<ul>
<li>List
pertama</li>
<li><a href="http://google.com">List
kedua</a></li>
</ul>
</p>
|
Jika
pengguna melakukan klik pada teks “List kedua” pada elemen HTML di atas,
maka browser terlebih dahulu akan menjalankan event yang
ada pada elemen a. Jika kita tidak memantau elemen
tersebut, maka browser akan mengecekevent pada
elemen li, dan seterusnya sampai kepada
elemen p dan akhirnya elemen teratas, body. Jika pada
elemenbody juga tidak terdapat event yang
dipantau, maka browser akan menjalankan fungsi standar browser.
Dalam contoh di atas, browser akan bergerak ke alamat http://google.com. Pola
pergerakan event seperti ini kita kenal dengan namaevent
bubbilg atau bubbing phrase.
Seperti
yang dapat dilihat sejauh ini, event dalam DOM cukup sederhana
dan mudah. Pada dasarnya, untuk menambahkan interaktifitas dalam dokumen HTML
kita cukup melakukan dua langkah saja:
- Buat fungsi
yang ingin dipanggil ketika event terjadi.
- Kaitkan
elemen DOM dengan event yang diinginkan, beserta dengan
fungsi yang dibuat pada langkah pertama.
Secara umum, browser menyediakan
lima fasilitas khusus berkaitan dengan event, yaitu fasilitas
untuk:
- Mendaftarkan
pemantau event.
- Mengambil
objek event.
- Mengambil
informasi dari objek event.
- Memberikan
informasi ke browser bahwa event telah
selesai ditangani.
- Menghapus
(melepaskan) pemantau event.
Kelima fasilitas yang ada ini sangat
mudah digunakan, walaupun sayangnya beberapa browser mengimplementasikan
semuanya dengan cara yang berbeda-beda. Seperti biasa, pembahasan akan kita
lakukan hanya untuk browser berbasis Webkit dan Gecko.
Pemantauan Event
Untuk
melihat bagaimana kita dapat memantau event pada sebuah elemen
DOM, kita akan bekerja dengan sebuah dokumen sederhana yang memiliki tulisan
dan tombol, seperti berikut:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!doctype
html>
<html>
<head>
<meta charset="UTF-8">
<title>Event
dalam Browser</title>
</head>
<body>
<h1 id="judul">Judul
Bab Dokumen</h1>
<p>
<a href="http://www.google.com" id="link">
Link ke Google
</a>
</p>
<input type="button"
id="btnJudul"
value="Ganti
Warna Judul Bab">
<input type="button"
id="btnLink"
value="Ganti
Warna Link">
<script
type="text/javascript" src="script.js"></script>
</body>
</html>
|
Untuk mengaitkan pemantau event ke
salah satu elemen, kita dapat memanggil method addEventListener milik
elemen tersebut. addEventListener merupakan method milik
objek yang mengimplementasikan antarmuka EventTarget.EventTarget sendiri
diimplementasikan oleh seluruh elemen HTML dan beberapa objek khusus lainnya
(misal:XMLHttpRequest). addEventListener menerima tiga buah argumen, yaitu:
- Argumen
pertama merupakan string yang berisi teks dari nama event yang
ingin dipantau.
- Argumen
kedua menerima objek, atau tepatnya fungsi, yang ingin dijalankan
ketika event terjadi.
- Argumen
ketiga yaitu sebuah nilai boolean yang menandakan apakah bubbling
phrase harus dijalankan dengan normal (dari dalam ke luar) atau
sebaliknya (dari luar ke dalam). Nilai false berarti bubbling phrase berjalan normal,
sementara true berarti bubbling phrase berjalan
terbalik. Argumen ketiga ini bersifat opsional (tidak harus diisikan).
Jika tidak diisikan bubbling phrase akan berjalan normal
(nilai false).
Pada umumnya kita hanya akan menggunakan
parameter pertama dan kedua, karena masih banyak browser yang
tidak mengimplementasikan argumen ketiga. Langsung saja, misalkan jika kita
ingin melakukan sesuatu ketika tombol “Ganti Warna Judul Bab” di-klik:
|
1
2
3
4
5
6
7
|
var
tombol = document.getElementById("btnJudul");
var
fungsi = function ()
{
var
jdl = document.getElementById("judul");
jdl.style.color = "#5FF";
};
tombol.addEventListener("click",
fungsi);
|
Kode di atas cukup jelas dan sederhana:
ambil elemen yang tepat (tombol) dan kemudian kaitkan event klik
ke fungsidengan addEventListener. Setelah menjalankan kode di atas,
elemen h1 dengan id judulBab akan
berubah warnanya ketika kita menekan tombol “Ganti Warna Judul Bab”.
Untuk menghilangkan atau membuang
pemantau event sendiri dapat dilakukan dengan mudah,
memanfaatkan fungsiremoveEventListener milik elemen yang bersangkutan.
Fungsi ini memiliki parameter yang sama persis denganaddEventListener.
|
1
|
tombol.removeEventListener("click",
fungsi);
|
Perhatikan juga bagaimana kita tetap
mengirimkan fungsi ke removeEventListener. Hal ini
berarti kita harus memiliki akses terhadap fungsi dan tombol ketika
memanggil removeEventListener.
Objek Event
Objek Event merupakan
sebuah objek yang dibuat ketika sebuah event berjalan.
Objek Event dapat kita akses melalui fungsi
yang kita kirimkan ke addEventListener:
|
1
2
3
4
5
6
|
var
aksesEvent = function
(evt) {
// parameter evt
merupakan objek Event
};
//
fungsi aksesEvent akan dapat mengakses objek event
tombol.addEventListener("click", fungsi);
|
Pada kode di atas, kita hanya cukup
menambahkan sebuah parameter ke dalam fungsi yang akan dikirimkan untuk dapat
mengakses Event. Melalui objek ini kita dapat mengakses
berbagai informasi mengenai event yang sedang berjalan.
Misalnya, kita bisa mendapatkan elemen yang sedang berinteraksi dengan pengguna
melalui properti target:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var
link = document.getElementById("link");
var
fungsiLink = function
(event) {
//
karena pengguna melakukan klik terhadap
//
elemen dengan id link, maka kita bisa
//
mengambil elemen tersebut melalui Event.target
var el
= event.target;
el.style.color = "#F43";
el.style.textDecoration = "none";
};
// ketika di-klik, link
akan berubah warna dan
// tidak lagi bergaris
bawah
link.addEventListener("click",
fungsiLink);
|
Sayangnya ketika kode penanganan event di
atas berjalan kita tidak akan dapat melihat perubahan warna dan tampilan teks
karena secara otomatis browser akan berpindah halaman ke
Google. Untuk menangani hal ini, kita bisa memanggilmethod preventDefault yang
berguna untuk membatalkan aksi standar (default) dari elemen DOM:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
link = document.getElementById("link");
var
fungsiLink = function
(event) {
var el
= event.target;
el.style.color = "#F43";
el.style.textDecoration = "none";
//
memaksa elemen link tidak membuat
//
browser berpindah ke halaman lain
event.preventDefault();
};
link.addEventListener("click",
fungsiLink);
|
Sekarang kita bisa melihat bagaimana
objek Event memiliki properti dan method yang
sangat berguna, beserta cara menggunakan fitur-fitur tersebut.
Keseluruhan method dan properti yang dimiliki objek Event tidak
akan kita bahas di sini. Silahkan baca dokumentasi objek Event pada
website yang relevan jika ingin melihat informasi apa saja yang disediakan
oleh Event.
Membuat Event Sendiri
Jika memang diperlukan, kita juga dapat
membuat event milik kita sendiri. Objek CustomEvent digunakan
untuk membuatevent yang kita inginkan. CustomEvent dapat
dibuat dengan memanggil constructor objek, seperti berikut:
|
1
2
3
4
5
|
var
eventBuatan = new
CustomEvent("eventBuatan", {
detail: {
name: "Event Buatan" },
bubbles: true,
cancelable: true
});
|
Seperti yang dapat dilihat dari kode di
atas, CustomEvent menerima dua buah parameter
untuk constructor-nya, yaitu:
- Nama event yang
kita inginkan, dalam contoh ini eventBuatan.
- Data yang
ingin kita berikan kepada event buatan.
Terdapat tiga data utama yang dapat kita
berikan, yaitu:
- bubbles, nilai boolean yang menentukan apakah event akan
menjalankan bubble phrase atau tidak.
- cancelable, nilai boolean untuk memberikan fitur
pembatalan event melalui method preventDefault danstopPropagation milik objek Event.
- detail, yang merupakan sebuah objek berisi data apapun
yang ingin kita berikan kepada event.
Untuk menggunakan event buatan,
kita dapat mengaitkan event tersebut kepada sebuah elemen DOM,
seperti layaknyaevent bawaan dari browser:
|
1
2
3
|
link.addEventListener("eventBuatan", function
(event) {
// lakukan sesuatu
ketika eventBuatan terjadi
});
|
Sayangnya, berbeda dengan event bawaan browser, event buatan
kita tidak akan dapat berjalan secara otomatis ketika pengguna melakukan
sesuatu dalam dokumen. Untuk event buatan, kita harus
memanggil method dispatchEvent ketika ingin menjalankan event tersebut. dispatchEvent sendiri
merupakan method milik elemen DOM, sehingga penggunaannya
memerlukan keberadaan elemen DOM yang bersangkutan:
|
1
|
link.dispatchEvent(eventBuatan);
|
Karena keterbatasan inilah maka dalam
penggunaan di aplikasi biasanya kita menggabungkan event buatan
dengan interaksi antar satu objek dengan objek lain, bukan interaksi antara
pengguna dengan dokumen HTML.
Keindahan Model Event Browser
Model event yang
disediakan oleh DOM sangat sederhana. Tidak hanya sederhana, model yang
diberikan oleh DOM juga sangat berguna. Dengan menggunakan model event milik
DOM, kita mendapatkan akses terhadap aksi pengguna dari berbagai perangkat,
mulai dari PC sampai dengan smartphone! Event memungkinkan
kita untuk mengakses apa yang terjadi, kapan sebuah event terjadi,
dan kemudian menentukan respon kita terhadap event tersebut
dengan sangat mudah. Bagaimana browser mengimplementasikan event tidak
terlalu penting - kita dapat dengan tenang mengahlikan fokus kita ke
pengembangan aplikasi web yang baik.
Abstraksi yang disediakan oleh event seperti
ini sangat patut ditiru. Jika mampu membangun aplikasi dengan
mengimplementasikan konsep-konsep yang ada dalam event, kita akan
mendapatkan kode aplikasi yang sangat rapi dan mudah dirawat. Framework modern
Javascript seperti Backbone.js dan AngularJS banyak menggunakan konsep-konsep
sejenis. Jika tertarik dengan konsep yang digunakan oleh model event seperti
ini, silahkan baca lebih lanjut mengenai pola pengembangan (design pattern)
Observer.
