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.
HTML Events
Event HTML bisa menjadi sesuatu yang dilakukan browser, atau sesuatu yang dilakukan pengguna.
Berikut beberapa contoh event HTML:
- Halaman web HTML telah selesai dimuat
- Input field HTML telah diubah
- Tombol HTML diklik oleh pengguna
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 onclick="document.getElementById('demo').innerHTML=Date()">Tanggal berapa sekarang?</button>
<p id="demo"></p>
</body>
</html>
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 onclick="this.innerHTML=Date()">Tanggal berapa sekrang?</button> </body> </html>
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 onclick="displayDate()">Tanggal berapa sekarang?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Event HTML yang UMUM
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 |
Apa yang Dapat Dilakukan JavaScript?
Event handler dapat digunakan untuk menangani dan memverifikasi hasil dari inputan pengguna, tindakan pengguna, dan tindakan browser. Contohnya:
- Hal-hal yang harus dilakukan setiap kali halaman dimuat
- Hal-hal yang harus dilakukan saat halaman ditutup
- Tindakan yang harus dilakukan saat pengguna mengklik tombol
- Konten yang harus diverifikasi saat pengguna memasukkan data
- Dan banyak lagi …
Banyak metode berbeda yang dapat digunakan agar JavaScript berfungsi dengan event, yaitu:
- Atribut event HTML dapat mengeksekusi kode JavaScript secara langsung
- Atribut event HTML dapat memanggil fungsi JavaScript
- Kita dapat menetapkan fungsi event handler sendiri ke elemen HTML
- Kita dapat mencegah event dikirim atau ditangani
- Dan banyak lagi …
