Event pada HTML adalah keadaan ketika ada sesuatu yang terjadi pada elemen HTML.
Saat menggunakan JavaScript pada halaman HTML, JavaScript dapat “bereaksi” pada event ini.
Event HTML bisa menjadi sesuatu yang dilakukan browser, atau sesuatu yang dilakukan pengguna.
Berikut beberapa contoh event HTML:
Seringkali ketika suatu event terjadi kemungkinan adalah karena kita ingin melakukan sesuatu.
JavaScript memungkinkan mengeksekusi kode saat event terdeteksi.
HTML memungkinkan atribut event handler menggunakan kode JavaScript, untuk ditambahkan ke dalam elemen HTML.
Berikut adalah contoh penulisan event pada kode.
Dengan tanda kutip tunggal:
<element event='some JavaScript'>
Dengan tanda kutip ganda:
<element event="some JavaScript">
Dalam contoh berikut, atribut onclick (dengan kode), ditambahkan ke elemen <button> :
<!DOCTYPE html> <html> <body> <button >
Pada contoh di atas, kode JavaScript mengubah konten elemen dengan id = “demo”.
Dalam contoh berikutnya, kode HTML mengubah konten elemennya sendiri (menggunakan this.innerHTML).
Contoh:
<!DOCTYPE html> <html> <body> <button >
Kode JavaScript biasanya terdiri dari beberapa baris. Dan yang lebih umum adalah atribut event yang memanggil fungsi.
Contoh:
<!DOCTYPE html> <html> <body> <p>Klik tombol untuk menampilkan tanggal.</p> <button >
Berikut adalah daftar beberapa event HTML yang umum digunakan:
| Event | Deskripsi |
|---|---|
| onchange | Elemen HTML telah diubah |
| onclick | Pengguna mengklik elemen HTML |
| onmouseover | Pengguna menggerakkan mouse ke atas elemen HTML |
| onmouseout | Pengguna menjauhkan mouse dari elemen HTML |
| onkeydown | Pengguna menekan tombol keyboard |
| onload | Browser telah selesai memuat halaman |
Event handler dapat digunakan untuk menangani dan memverifikasi hasil dari inputan pengguna, tindakan pengguna, dan tindakan browser. Contohnya:
Banyak metode berbeda yang dapat digunakan agar JavaScript berfungsi dengan event, yaitu: