Event Handler

metedeh.blogspot.co.id
Event adalah suatu aksi yang dapat dideteksi oleh Javascript,seperti saat dokumen di-load,atau saat pengguna mengklik suatu elemen atau hanya menggerakkan pointer mouse di atas suatu elemen.Sebuah event diidentifikasikan dengan sebuah event handler. Sebagai contoh, event handler onload memicu sebuah script saat dokumen dimuat,dan handler onclick dan onmouseover memicu script saat pengguna mengklik atau menggerakkan pointer mouse diatas elemen. Berikut ini adalah event handler yang biasa digunakan :

Event Handler Deskripsi Event
onblur Sebuah elemen kehilangan fokus
onchange Konten dalam field suatu form berubah
oclick Sebuah objek diklik
onerror Terjadi error saat memuat dokumen atau gambar
onfocus Sebuah elemen mendapatkan fokus/dipilih
onkeydown Sebuah tombol pada keyboard ditekan
onkeypress Sebuah tombol pada keyboard ditekan atau ditahan
onkeyup Sebuah tombol pada keyboard dilepaskan
onload Sebuah gambar atau halaman selesai dimmuat
onmousedown Tombol pada mouse ditekan
onmousemove Pointer mouse digerakkan
onmouseout Pointer mouse dipindahkan dari suatu elemen
onmouseover Pointer mouse ditempatkan diatas suatu elemen
onmouseup Tombol pada mouse dilepaskan
onsubmit Tombol submit pada form diklik
Ada tiga metode untuk menerapkan event handler pada suatu item dalam halaman web :
  • Sebagai atribut HTML
  • Sebagai Method
  • Menggunakan addEventListener
Sebagai Atribut HTML
Anda dapat mengatur fungsi yang akan dijalankan dalam sebuah atribut pada markup seperti contoh berikut :
<body onclick="fungsiSaya();">
//*fungsiSaya akan dijalankan saat pengguna mengklik apapun dalam elemen 'body' */
Sebagai Method
Anda dapat menambahkan fungsi menggunakan helpers yang sudah ada dalam Javascript
window.onclick = fungsiSaya;
/*fungsiSaya akan dijalankan saat pengguna mengklik apapun dalam jendela browser*/
Menggunakan addEventListener
Untuk menggunakan metodde ini,pertama-tama kita perlu memanggil method addEventListener dari objek yang diinginkan,kemudian menentukan event dan gunsi yang akan dieksekusi sebagai argumen.
window.addEventListener("click",fungsiSaya);
Metode ini juga dapat menggunakan fungsi anonim,seperti contoh berikut
window.addEventListener("click", function(e)
{.........    
});

Sekian dan Terima Kasih Semoga Artikel ini Bermanfaat

Tidak ada komentar:

Posting Komentar