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.