Apa itu Penanganan Event
Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event atau kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan sebagainya.
Sintaknya:
nama_event=”kode javascript”
Event adalah sesuatu yang terjadi pada halaman HTML. Berikut ini terdapat beberapa bentuk kejadian yaitu jika pengguna memuat dokumen, pengguna memasukkan data, pengguna mengklik tombol dan sebagainya.
Hal-hal tersebut diatur oleh even.Semua kejadian pada Javascript dapat anda tangani dengan menentukan kejadiannya.
Biasanya kejadian(even) adalah sebuah fungsi, tetapi pada beberapa kasus, kita dapat menuliskan pernyataan-pernyataannya secara langsung
Berikut ini adalah daftar kejadian (event) pada JavaScript
Kejadian
|
Keterangan
|
onClick
|
Kejadian yang
dibangkitkan bila pengguna
mengklik sebuah elemen form atau link.
|
onChange
|
Dibangkitkan bila
informasi masukan
pada sebuah elemen form (text, textarea, select)
diubah oleh pengguna.
|
onBlur
|
Dibangkitkan ketika
suatu
elemen kehilangan focus masukan, yaitu ketika
pengguna menekan
tombol <tab> atau mengklik
elemen lain form lainnya.
|
onFocus
|
Dibangkitkan bila
sebuah elemen form
menerima focus masukan; yaitu bila
pengguna
mengklik elemen form tersebut
atau menekan tombol <tab> sehingga
focus masukan berpindah ke elemen ini.
|
onAbort
|
Dibangkitkan bila
pengguna menghentikan
pemuatan citra (tag<img>) yaitu bila
pengguna
menekan tombol stop atau mengklik link.
|
onError
|
Dibangkitkan bila
terjadi kesalahan saat
browser memuat dokumen atau citra.
|
onLoad
|
Dibangkitkan bila
browser selesai memuat
document
|
onUnload
|
Dibangkitkan bila pengguna keluar dari dokumen
|
onMouseOver
|
Dibangkitkan bila kursor mouse berada di atas
sebuah link.
|
onMouseOut
|
Dibangkitkan bila
kursor mouse keluar
dari daerah link atau peta citra.
|
onReset
|
Dibangkitkan bila pengguna menekan tombol reset
|
onSelect
|
Kejadian yang
dibangkitkan bila pengguna
memilih sebagian atau seluruh teks
pada
elemen form yang berupa kotak teks.
|
onSubmit
|
Dibangkitkan ketika
pengguna menekan
tombol submit.
|
Contoh oncklik (Kejadian yang dibangkitkan bila pengguna mengklik sebuah elemen form atau link.) berikut jika kita mengklik radio button akan mengubah warna latar halaman web
berikut code nya
Contoh Event OnClick
|
<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> function warna(pilihan) { alert("Anda Memilih Warna " + pilihan); document.bgColor=pilihan; } </SCRIPT> <h1 align="center">Latihan Event OnClick</h1> <hr width="500" color="black" noshade> <h3 align="center">Pilih warna favorit anda.</h3> <CENTER> <FORM> <INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')"> <INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')"> <INPUT TYPE="button" VALUE="Coklat" onClick="warna('burlywood')"> <INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')"> <INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')"> <INPUT TYPE="button" VALUE="Putih" onClick="warna('white')"> </FORM> </CENTER> <hr width="500" color="black" noshade> </BODY> </HTML> |
Contoh Event OnClick
|
<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> function warna(pilihan) { alert("Anda Memilih Warna " + pilihan); document.bgColor=pilihan; } </SCRIPT> <h1 align="center">Latihan Event OnClick</h1> <hr width="500" color="black" noshade> <h3 align="center">Pilih warna favorit anda.</h3> <CENTER> <form name="go"> <input type="radio" name="C1" onclick="document.bgColor='lightblue'"> <input type="radio" name="C1" onclick="document.bgColor='lightyellow'"> <input type="radio" name="C1" onclick="document.bgColor='lightgreen'"> </form> </FORM> </CENTER> <hr width="500" color="black" noshade> </BODY> </HTML> |
Master Desrizal
the-xp.blogspot.com
Alhamdulillah Catatan sederhana mengenai Pengetahuan Event (Kejadian) pada JavaScript telah selesai mohon maaf jika da kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment