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 :
