Event Handler JavaScript

Event Handler

Event Handler Adalah property yang sudah didefinisikan oleh JavaScript dari sebuah objek  yang digunakan untuk menghandel sebuah event dalam halaman web.

Event adalah sesuatu yang terjadi ketika user melakukan aksi pada halaman tertentu seperti mengklik tombol mouse pada halaman web.

Event Handler dalam JavaScript bisa kamu lihat pada tabel dibawah ini:

Event Event Handler Event Trigger
Abort onabort Sebuah gambar distop saat sebelum selesai loading.
Blur onblur User berpindah fokus dari satu elemen.
Change onchange User merubah isi dari sebuah elemen.
Click onclick User mengklik sebuah elemen
ContextMenu oncontextmenu User membuka context menu
Copy oncopy User menggunakan perintah copy pada bagian dari halaman web
Cut oncut User menggunakan perintah cut pada bagian dari halaman web
Dblclick ondblclick User mendobel klik mouse
Error onerror Browser user mendapatkan error JavaScript
Focus onfocus User memberikan fokus pada elemen
Keydown onkeydown User menekan key pada keyboard
Keypress onkeypress User menekan key pada keyboard lalu melepaskannya
Keyup onkeyup User melepaskan key pada keyboard
Load onload Halaman web selesai loading
Mousedown onmousedown User menekan tombol mouse
Mousemove onmousemove User memindahkan mouse
Mouseout onmouseout User memindahkan mouse dari sebua elemen
Mouseover onmouseover User memindahkan mouse diatas elemen
Mouseup onmouseup User melepas tombol mouse
Paste onpaste User menggunakan perintah paste pada sebagian halaman web
Reset onreset User mereset form pada sebuah halaman web
Resize onresize Sebuah window di resize
Scroll onscroll User menscroll sebuah area yang bisa discroll
Select onselect User membuat seleksi
Submit onsubmit User mensubmit form dalam sebuah halaman web
Unload onunload User meninggalkan halaman current

Event Abort

Event abort terjadi saat user menyetop loading dari sebuah gambar.

Event handlernya adalah onabort.

Sebagai contoh: jika kamu ingin menampilkan pesan ketika user menyetop gambar saat loading maka kamu bisa gunakan kode seperti berikut ini:

<img src=“gambar.jpg” alt=“gambar saya” onabort=”window.alert(‘Kok berhenti sih … ?’);”?>

Event Blur

Event blur adalah lawanan dari event focus dan dia terjadi saat user berpindah fokus dari satu elemen form atau window.

Sebagai contoh: kode dibawah ini menggunakan dua textbox  dimana saat mengklik textbox pertama maka kamu memberinya fokus  dan saat mengklik textbox kedua maka kamu membangkitkan event blur pada textbox pertama.

<form>
Klik textbox ini:<br />
<input type=”text” onblur=”window.alert(‘Kamu berhasil melakukan event blur’);” /><br />
Picu event blur pada textbox pertama<br />
<input type=”text” />
</form>

Keterangan:

Ketika user mengklik textbox kedua maka  dia mendapatkan pesan “Kamu berhasil melakukan event blur”.

Event Change

Event Change terjadi ketika user merubah isi dari elemen form.

Misalnya user merubah isi dari textbox atau menseleksi pilihan dalam select box.

Cobalah kode dibawah ini:

<form>
Minuman favoritmu<br />
<select onchange=”window.alert(‘Kenapa kamu pilih minuman itu … ?’);”>
<option selected=”selected”>Juice</option>
<option>Sprite</option>
<option>Cocacola</option>

<option>Pepsi</option></select>
</form>

Jika user memilih selain Juice maka akan keluar pesan “Kenapa kamu pilih minuman itu … ?”.

Event Click

Event click terjadi ketika user mengklik elemen dalam sebuah halaman web.

Contoh dibawah ini ketika user mengklik tombol Klik disini maka akan keluar pesan “ini adalah Event Click”.

<form>
<input type=“button” value=“Klik disini”
onclick=”window.alert(‘ini adalah Event Click’);”>
</form>

Event Focus

Event focus ini terjadi ketika user memberikan fokus kepada sebuah elemen  dari halaman web.

Contoh dibawah ini terdapat sebuah textbox dimana saat kamu memberikan fokus kepadanya maka akan keluar pesan “Kamu memberikan fokus kepadaku”.

<form>
Masukkan namamu:
<input type=”text” onfocus=”window.alert(‘Kamu memberikan fokus kepadaku‘);” />
</form>

Event Keydown

Event keydown terjadi ketika user menekan sebuah key pada keyboard.

Contoh dibawah ini terdapat sebuah textbox dimana saat kamu menekan key pada keyboard  maka akan keluar pesan Kamu menekan sebuah key pada keyboard.

<form>
Masukkan namamu:
<input type=”text” onkeydown=”window.alert(‘Kamu menekan sebuah key pada keyboard‘);” />
</form>

Event Keyup

Event keyup terjadi ketika user melepas sebuah key pada keyboard.

Contoh dibawah ini terdapat sebuah textbox dimana saat kamu melepas key pada keyboard  maka akan keluar pesan Kamu telah melepas sebuah key pada keyboard.

<form>
Masukkan namamu:
<input type=”text” onkeyup=”window.alert(‘Kamu telah melepas sebuah key pada keyboard‘);” />
</form>

Event Keypress

Event Keypress terjadi diantara  event keydown dan event keyup.

<form>
Masukkan namamu:
<input type=”text” onkeypress=”window.alert(event.keyCode);” />
</form>

Saat kamu menekan key pada keyboard maka akan keluar angka, misal jika kamu tekan enter maka akan keluar angka 13.

Event Load

Event ini terjadi setelah halaman web selesai loading.

<body onload=”window.alert(‘Saya sudah selesai loading‘);”>
Saya sudah selesai loading
</body>

Event Mousedown

Event ini terjadi saat user menekan tombol mouse.

<body onmousedown=”window.alert(‘Saya menekan mouse’);”>
Silahkan tekan tombol mouse
</body>

Event Mousemove

Event ini terjadi saat user menggerakkan kursor di atas elemen.

<a href=”http://www.a2fahmi.com” onmouseover=”window.alert(‘Kamu telah menggerakkan mousemu’);”>
Menuju a2fahmi.com</a>

Sekarang coba kamu gerakkan kursor mousemu diatas link Menuju a2fahmi.com.

Event Mouseout

Event ini terjadi ketika user menggerakkan mouse keluar dari area pada halaman web.

<a href=”http://www.a2fahmi.com” onmouseout=”window.alert(‘Hai kembali lagi dan klik saya’);”>
Menuju a2fahmi.com</a>

Coba kamu arahkan kursor mouse diatas link Menuju a2fahmi.com, lalu kamu arahkan kursor mouse menjauh dari link tersebut.

Event Mouseup

Event ini terjadi ketika user telah melepaskan tombol mouse.

<p onmouseup=”window.alert(‘Kamu telah melepaskan tombol mousemu’);”>
Klik saya</p>

Coba kamu tekan tombol mousemu diatas tulisan klik saya maka akan keluar pesan ‘Kamu telah melepaskan tombol mousemu’.

Event Reset

Event ini terjadi ketika user menglik tombol reset pada sebuah form.

<form onreset=”window.alert(‘Kamu ingin mengosongkan teks’);”>
Masukkan namaamu:<br />
<input type=”text” id=”nama” /><br />
<input type=”reset” value=”Kosongkan”>
</form>

Event Submit

Event ini terjadi ketika user mengklik tombol submit pada sebuah halaman web.

<form onsubmit=”window.alert(‘Kamu telah menekan tombol submit’);”>
Masukkan namaamu:<br />
<input type=”text” id=”nama” /><br />
<input type=”submit” value=”Kirim”>
</form>

Event Unload

Event ini terjadi ketika user meninggalkan halaman web dengan cara :

  • Mengetik alamat web lain pada address bar
  • Menutup halaman web tersebut

<body onunload=”window.alert(‘Ingat untuk kembali, OK?’);”>
a2fahmi.com tutorial untuk web developer
</body>

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

1 Response

  1. cipta says:

    Bang Fahmi, terima kasih banged, postingannya sangat membantu, saya lagi belajar javascript nih.. Thanx ya Bang.. ^ ^

Leave a Reply

Your email address will not be published. Required fields are marked *