Saturday, January 3, 2015

Tutorial Javascript Part 9: 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
  • Print
  • 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 :

1 komentar: