Saturday, January 3, 2015

Tutorial Javascript Part 10: Macam-macam Event HTML DOM

DOM adalah singkatan dari Document Object Model. Dengan DOM maka tiap tiap elemen HTML bisa dianggap sebagai object. Dengan demikian kita bisa menetapkan handler untuk tiap-tiap event yang muncul pada tiap-tiap elemen HTML tersebut seperti yang telah ditulis pada artikel sebelumnya.

Ada beberapa kondisi yang memicu terjadinya event, diantaranya perilaku pengguna melalui mouse dan keyboard dan hal-hal yang terjadi pada browser. Berikut ini beberapa event yang ada pada HTMLDOM :

1. Event Mouse

Adalah event yang dipicu oleh tingkah laku pengguna melalui mouse.
Event Keterangan DOM
onclick Terjadi saat pengguna meng-klik (kiri) sebuah elemen. 2
oncontextmenu Terjadi saat pengguna klik kanan pada elemen untuk membuka context menu. 3
ondblclick Terjadi saat pengguna melakukan dobel-klik (kiri) pada sebuah elemen. 2
onmousedown Terjadi saat pengguna menekan tombol diatas sebuah elemen. 2
onmouseenter Terjadi saat pointer mouse bergerak masuk ke sebuah elemen. 2
onmouseleave Terjadi saat pointer mouse bergerak keluar dari sebuah elemen. 2
onmousemove Terjadi saat pointer mouse bergerak diatas sebuah elemen. 2
onmouseover Terjadi saat pointer mouse bergerak masuk ke sebuah elemen atau salah satu elemen anaknya. 2
onmouseout Terjadi saat pointer mouse bergerak keluar dari sebuah elemen atau salah satu elemen anaknya. 2
onmouseup Terjadi saat pengguna selesai menekan tombol diatas sebuah elemen. 2

2. Event Keyboard

Adalah event yang dipicu oleh tingkah laku pengguna melalui tombol-tombol keyboard.
Event Keterangan DOM
onkeydown Terjadi saat pengguna menekan tombol pada keyboard. (gerakan menekan sekali) 2
onkeypress Terjadi saat pengguna menekan (dan menahan) tombol pada keyboard. (kondisi tombol tertekan belum dilepas) 2
onkeyup Terjadi saat pengguna melepaskan tombol pada keyboard setelah keypress. 2

3. Event Page/Frame/Object

Adalah event yang dipicu oleh tingkah laku halaman, frame atau object pada browser.
Event Keterangan DOM
onabort Terjadi saat proses loading page dibatalkan. 2
onbeforeunload Terjadi sesaat sebelum dokumen di-unload. 2
onerror Terjadi saat terjadi error loading file. 2
onhashchange Terjadi saat ada perubahan pada sebagian anchor hashtag (#) dari URL. 3
onload Terjadi saat object selesai di-load. 2
onpageshow Terjadi saat pengguna mengarahkan navigasi menuju ke sebuah halaman web. 3
onpagehide Terjadi saat pengguna mengarahkan navigasi pergi dari sebuah halaman web. 3
onresize Terjadi saat view page diresize. 2
onscroll Terjadi saat scrollbar pada elemen (jika ada) di scroll. 2
onunload Terjadi saat object selesai di-unload.(untuk  <body>) 2

4. Event Form

Adalah event yang dipicu oleh hal-hal yang terjadi pada sebuah form.
Event Keterangan DOM
onblur Terjadi saat elemen sudah tidak difokus kursor lagi. 2
onchange Terjadi saat isi, seleksi atau check dari elemen form telah diganti. (berlaku untuk elemen <input>, <keygen>, <select>, and <textarea>) 2
onfocus Terjadi saat elemen mendapat fokus kursor. 2
onfocusin Terjadi saat elemen menuju proses mendapat fokus kursor. 2
onfocusout Terjadi saat elemen menuju proses tidak difokus kursor lagi. 2
oninput Terjadi saat elemen mendapat input dari pengguna. 3
oninvalid Terjadi saat sebuah elemen invalid. 3
onreset Terjadi saat form direset. 2
onsearch Terjadi saar pengguna menulis sesuatu pada input search.(berlaku untuk   <input="search">) 3
onselect Terjadi saat pengguna selesai menyeleksi teks pada elemen form <input> dan <textarea> 2
onsubmit Terjadi saat form di submit. 2

5. Event Drag/Drop

Adalah event yang dipicu oleh proses drag dan drop pada elemen. Drag adalah proses mengklik elemen, ditahan lalu digerakkan dalam kondisi masih di klik. Drop adalah proses melepaskan elemen yang di-drag pada target.
Event Keterangan DOM
ondrag Terjadi saat elemen di-drag. 3
ondragend Terjadi saat pengguna selesai men-drag sebuah elemen. 3
ondragenter Terjadi saat elemen yang di-drag memasuki target drop. 3
ondragleave Terjadi saat elemen yang di-drag meninggalkan target drop. 3
ondragover Terjadi saat elemen yang di-drag meninggalkan target drop. 3
ondragstart Terjadi saat pengguna mulai men-drag sebuah elemen. 3
ondrop Terjadi saat elemen yang di-drag didrop pada target. 3

6. Event Clipboard

Adalah event yang dipicu oleh hal-hal yang terjadi pada clipboard.
Event Description DOM
oncopy Terjasi saat pengguna selesai melakukan proses kopi terhadap isi sebuah elemen.  -
oncut Terjasi saat pengguna selesai melakukan proses cut terhadap isi sebuah elemen.  -
onpaste Terjasi saat pengguna selesai melakukan proses paste pada sebuah elemen.  -

7. Event Print

Adalah event yang dipicu oleh proses cetak/printing.
Event Description DOM
onafterprint Terjadi saat dokumen mulai dicetak, yaitu tombol print ditekan dan kotak dialog print ditutup. 3
onbeforeprint Terjadi saat sebuah halaman akan diprint, saat akan masuk kotak dialog print. 3

8. Event Animasi

Adalah event yang dipicu oleh proses animasi CSS.
Event Description DOM
animationend Terjadi setelah proses animasi CSS selesai. 3
animationiteration Terjadi saat proses animasi CSS diulang. 3
animationstart Terjadi saat proses animasi CSS dimulai. 3

Lihat indeks artikel Tutorial Javascript Dasar >>

Referensi :

0 komentar

Post a Comment