Menangani Event HTML – Event HTML adalah kejadian-kejadian yang berlaku pada elemen html karena tindakan pengguna atau perilaku browser. Contoh event-event yang biasa kita temui adalah saat mouse diklik, saat halaman selesai diload dan saat text pada input text berubah.
Dengan javascript kita bisa menangani event-event ini satu persatu. Hal ini membuat website menjadi lebih interaktif dan dinamis.
macam-macam event html
Ada banyak even yang berlaku pada html. Namun secara garis besar even-event ini dipicu oleh hal-hal diantaranya berikut ini:
- Mouse
- Keyboard
- Frame/Object
- Form
- Drag
- Clipboard
- Media
- Animation
- Transition
- Server-sent
- Touch
Dari sekian banyak event yang dipicu oleh hal-hal diatas, berikut ini adalah beberapa even yang sering dipakai:
| Event | Keterangan |
|---|---|
| onchange | Saat elemen html berubah |
| onclick | Saat pengguna meng-klik sebuah elemen html, misal : buttton |
| onmouseover | Saat kursor mouse berada diatas elemen html |
| onmouseout | Saat kursor mouse pergi dari atas elemen html |
| onkeydown | Saat pengguna menekan tombol keyboard |
| onload | The browser has finished loading the page |
Untuk event selengkapnya insyaAllah akan ditulis pada artikel selanjutnya
Menangani Event
Untuk menangani event pada elemen HTML, kita tambahkan atribut nama event yang akan ditangani pada tag elemen html beserta kode javascriptnya. Untuk memudahkan penulisan, biasanya kode-kode ini disingkat kedalam nama function saja.
Kemudian kita membuat function baru sesuai nama function pada event tadi lalu kode-kode program yang akan diterapkan pada event ditulis didalam function tersebut.
Cara penulisan event dan penanganannya pada elemen html :
<nama-elemen nama-event="kode javascript">
Contoh berikut ini menambahkan function Pesan() saat event onclick pada button :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Pesan()
{
window.alert("Terima kasih telah mengklik saya");
}
</script>
</head>
<body>
<h1>Display Alert Box</h1>
Silahkan klik pada tombol
<button onclick="Pesan()">Enter</button>
</body>
</html>
Lihat indeks artikel Tutorial Javascript Dasar >>
Referensi :
