Event pada JavaScript sebenarnya juga dapat dianggap seperti layaknya function bawaan yang sudah disediakan oleh JavaScript. Namun, jika function harus dipanggil terlebih dahaulu agar prosesnya dapat dijalankan, event tidak perlu harus dipanggil. Event akan dijalankan ketika suatu aksi tertentu dekenakan pada element tertentu milik HTML. Atau dengna kata lain, function dikendalikan oleh pemogram, sementara event dikendalikan oleh pengguna.
Bahasan ini akan membahas lebih detail mengenai event dan bagaimana memanfaatkan event tersebut secara optimal untuk kebutuhan Anda.
Macam-macam event
Event yang disediakan JavaScript terbagai menjadi 2 (dua) jenis, yaitu event sistem dan event pengguna. Event sistem adalah event yang selalu ada dan disediakan oelh JavaScript serta sangat terkait dengan sistem dimana halaman web ditampilkan. Sedangkan event pengguna adalah event yang hanya tersedia relatif terhadap konteks elemet halamanweb apa yang diacu oleh pengguna. Berikut dibawah ini adalah event sistem
| Event | Keterangan |
| onError | Event ini dibangkitkan ketika terjadi kesalahan. Event ini dimiliki oleh objek Window dan Image |
| onLoad | Event ini dibangkitkan ketika suatu objek selesai ditampilkan pada halaman web. Objek yang dimaksud pada keterangan ini adalah objek Window, Frame dan Image |
| onUnload | Event ini dibangkitkan ketika suatu objek telah dikeluarkan dari ruang memori, atau telah selesai digunakan. Objek ini adalah objek Window, Frame dan Image |
| Event | Keterangan |
| onAbort | Event yang dimiliki oleh objek image ini akan dibangkitkan ketika sebuah gambar dihentikan proses pemunculannya yang dimungkinkan akibat penekanan tombol stop pada browser |
| onBlur | Event ini dibangkitkan ketika sebuah element (dalam hal ini adalah element window, frame, select, text, dan textarea) kehilangan focusnya |
| onChange | Event ini dibangkitkan ketika sebuah element (dalam hal ini adalah element select, text dan textarea) telah diubah nilainya sebelum element tersebut kehilangan focusnya |
| onClick | Event ini dibangkitkan ketika terjadi aksi klik (dilakukan oleh pengguna) terhadap element, dimana element yang dimaksud adalah semua element dari form yang dapat diklik seperti element button (tombol). Aksi klik yang dimaksud adalah adanya penekanan tombol klik kir mouse terhadap suatu element |
| onContextMenu | Event ini terbangkitkan ketika terjadi aksi klik kanan dari tombol mouse terhadap suatu element |
| onDblClick | Hampir sama dengan event onClick, namun akan dibangkitkan ketika terjadi aksi klik ganda terhadap suatu element |
| onFocus | Event ini adalah kebalikan dari event onBlur, dimana akan dibangkitkan ketika suatu element dikenai focus. Element-element yang dimaksud adalah element window, frame, select, text dan textarea |
| onHelp | Event ini dibangkitkan ketika terjadi penekanan terhadap tombol F1, yang umumnya digunakan berbagai aplikasi sebagai tombol shortcut untuk menampilkan fasilitas bantuan (help) . Anda dapat menggunakan event ini untuk mengalihkan fitur help milik browser menjadi fitur help yang Anda buat sendiri untuk halaman web Anda. |
| onKeydown | Event ini dibangkitkan ketika terjadi penekanan ke bawah tombol keyboard |
| onKeypress | Event ini dibangkitkan ketika terjadi aksi penekanan tombol keyboard. Aksi penekanan disini adalah sebuah aksi lengkap penekanan tombol keyboard, mulai dari memencet tombol keyboard tersebut hingga melepaskannya |
| onKeyup | Event ini dibangkitkan ketika tombol keyboard yang awalnya ditekan lalu dilepas, ketika tombol dilepas event ini bangkit . |
| onMousedown | Event ini dibangkitkan, ketika tombol mouse ditekan ke bawah |
| onMousemove | Event ini dibangkitkan ketika mouse digerakkan (panah mouse berubah posisinya) |
| onMouseout | Event ini dibangkitkan ketika panah mouse kelaur dari daerah lingkupan suatu element, yaitu element hyperlink dan element area. |
| onMouseover | Event ini dibangkitkan ketika panah mouse berada diatas element , yaitu element hyperlink dan element area . |
| onReset | Event yang dimiliki secara khusus oleh objek form ini akan dibangkitkan ketika terjadi penekanan terhadap tombol reset yang dimiliki form yang bersangkutan |
| onResize | Event ini dibangkitkan ketika jendela browser diubah ukurannya, baik diperbesar maupun diperkecil |
| onSelect | Event ini dibangkitkan ketika terjadi pemilihan teks pada lement text dan textarea dengan cara memberinya highlight (diblok) |
| onStop | Event ini dibangkitkan ketika pengguna melakukan penekanan terhadap tombol stop dari browsernya |
| onSubmit | Event ini dibangkitkan setelah terjadi penekanan tombol submit yang dimiliki sebuah form |
Untuk menangani event pada suatu elemnt tertentu dari HTML, Anda cukup menambahkan atribut event tersebut pada element yang dimaksud. Atribut ini kemudian diisi dengan kode script yang ingin Anda eksekusi ketika event tersebut dibangkitkan. Sebagai contoh, kode berikut ini menjukkan penanganan event onLoad pada element <BODY>, sehingga setiap kali halaman web muncul pada browser, akan muncul pesan ucapan selamat datang.
<html>
<head>
<title>Latihan Event</title>
<script type="text/javascript">
document.write("<h2>Contoh Latihan Event</h2>");
document.write("<br>");
document.write("--------------------------------------------");
document.write("<br>");
document.write("Setiap kali halaman ini di load akan muncul pesan selamat datang");
document.write("<br>");
document.write("--------------------------------------------");
</script>
</head>
<body onLoad="JavaScript: alert('Selamat Datang di Situs Kami !');">
</body>
</html>
dan gambar dibawah ini adalah hasil output dari kode diatas
Penanganan event juga dapat dibelokkan pada function buatan Anda. Misalnya, masih menggunakan contoh diatas, event onload akan kita belokkan pada sebuah function yang menampilkan jendela pesan selamat datang, berikut kode contohnya
<html>
<head>
<title>Latihan Event</title>
<script type="text/javascript">
document.write("<h2>Contoh Latihan Event</h2>");
document.write("<br>");
document.write("--------------------------------------------");
document.write("<br>");
document.write("Setiap kali halaman ini di load akan muncul pesan selamat datang");
document.write("<br>");
document.write("--------------------------------------------");
function TampilPesan(){
alert("Selamat datang di Situs Kami !");
}
</script>
</head>
<body onLoad="TampilPesan();">
</body>
</html>
Jika kode tersebut dijalankan, maka Anda akan mendapatkan hasil yang sama seperti gambar diatas
