Event Pada JavaScript

View Categories

Event Pada JavaScript

Event adalah sesuatu aksi yang dilakukan pada HTML elemen. Kita dapat mendeteksi event pada dokumen HTML dengan menggunakan JavaScript.

Event HTML

Event bisa merupakan sesuatu aksi yang dilakukan oleh web browser atau aksi yang dilakukan oleh pengguna. Berikut beberapa contoh aksi pada dokumen HTML :

  • Pengguna menekan tombol
  • Pengguna mengubah isi elemen input
  • Web browser selesai menampilkan dokumen HTML

Aksi pada dokumen HTML akan mengeluarkan object event. JavaScript bisa digunakan untuk menangkap object event.

JavaScript mempunyai atribut event pada beberapa elemen HTML. Atribut event berisi perintah JavaScript (coding JavaScript). Perintah JavaScript ini akan dieksekusi apabil suatu event dikeluarkan.

Atribut event dapat menggunakan single quote.

<element event='some JavaScript'>

Atribut event juga dapat menggunakan double quote.

<element event="some JavaScript">

Contoh di bawah ini memperlihatkan atribut event onclick ditambahkan kepada elemen Button (tombol). Nilai atribut ini adalah coding JavaScript. Event onclick akan dilempar apabila tombol diklik. Event onclick ini ditangkap di dalam coding JavaScript. Pada coding JavaScript kita bisa melakukan suatu aksi. Aksi pada contoh adalah mengubah konten elemen HTML dengan id demo.

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Jalankan Contoh

Pada contoh di bawah ini kita mengubah konten (caption) tombol pada saat event onclick ditangkap.

<button onclick="this.innerHTML = Date()">The time is?</button>

Jalankan Contoh

Nilai atribut event juga bisa berupa fungsi. Fungsi ini akan dipanggil apabila suatu event ditangkap. Pada contoh di bawah diperlihatkan fungsi displayDate dipanggil pada waktu tombol diklik.

<button onclick="displayDate()">The time is?</button>

Jalankan Contoh

Bahan Belajar JavaScript Event

Contoh Event

Berikut ini beberapa contoh event yang banyak digunakan. Nama atribut event sama dengan nama event.

Tutorial JavaScript Event Lain

  • onchange, event ini dilempar apabila nilai elemen input diganti
  • onclick, event ini dilempar apabila elemen HTML diklik
  • onmouseover, event ini dilempar apabila pointer mouse berada diatas suatu elemen HTML
  • onmouseout, event ini dilempar apabila pointer mouse keluar dari elemen HTML
  • onkeydown, event ini dilempar apabila keyboard ditekan pada elemen HTML
  • onload, event ini dilempar apabila web browser selesai menampilkan semua element HTML pada suatu dokumen HTML

Tutorial sebelumnya : JavaScript Object
Tutorial setelahnya : JavaScript Text Atau String
Semua Tutorial JavaScript : Tutorial JavaScript 

Tinggalkan Balasan