Event atau kejadian merupakan salah satu nama aksi yang bisa digunakan untuk memicu proses logika di JavaScript. Event ini biasanya telah ada bawaan browser dan ada juga yang ditanam secara manual. Event yang paling sering digunakan adalah event onclick. Event onclick akan terjadi atau dieksekusi ketika elemen HTML diklik. Begitupun event lainnya semuanya memiliki proses, kondisi, dan kriteria untuk menjalankan JavaScript.
Daftar Event yang ada biasa ada di javascript
Berikut ini adalah daftar event yang biasa atau ada di javascript.
| Nama Event | Penjelasan |
|---|---|
| onclick | Event yang paling banyak digunakan. Event ini sudah ada pada a / anchor ketika akan membuka link |
| onchange | Event on change akan terjadi jika ada perubahan pada suatu element, bisa berubah nilai, bentuk, maupun isi dari element tersebut. |
| onmouseover | Element yang akan terproses jika mouse digerakan diatas element tertentu. |
| onmouseout | Event yang akan terjadi ketika mouse pointer keluar dari suatu element tertentu |
| onkeydown | Event yang terjadi ketika keyboard diketik |
| onload | Event yang terjadi ketika browser selesai memanggil semua elemen DOM |
Penggunaan Event
Penggunaan Event tergantung kebutuhan penggunanya. Jika kita ingin menggunakan tombol untuk mengganti teks tertentu, maka kita cukup menambahkan event onclick terhadap element button tersebut. Sama halnya dengan event yang lainnya. Ada beberapa event yang biasa di picu terhadap kejadian tertentu. Seperti event before click atau event sebelum diklik, event after click atau event setelah diklik dan masih banyak lainnya.
Menginstall event di Element
Bagaimana cara menanam / meng-install event dielement tertentu? Jika dilakukan secara manual maka ini akan terasa susah. Namun, jika menggunakan framework tertentu maka kita bisa menanamnya dengan mudah. Dalam percobaan kali ini kita akan menggunakan jQuery sebagai framework JavaScriptnya.
Menginstall Event onclick menggunakan jQuery
Untuk menginstall event onlick menggunakan jquery cukup mudah dilakukan. Hal yang pertama kali dilakukan adalah memanggil jQuery kedalam HTML. Kemudian membuat inline script untuk mengeksekusi-nya. Berikut ini adalah contohnya.
$("#nama_id_element").on("click",function(e){
e.preventDefault();
alert("Saya diklik");
}); Dari contoh kode tersebut kita akan menanam event onclick pada DOM element dengan ID=”nama_id_element”. Jadi jika anda membuat HTML sudah ada IDnya yang sama, maka ketika ID tersebut diklik akan muncul alert.
Meng-uninstall event onclick menggunakan jQuery
Sama halnya seperti menanam event, mencabut event juga sangat mudah jika dilakukan dengan menggunakan javascript. Berikut ini adalah contoh kode-nya.
$("#nama_id_element").off("click"); Jika kita sudah memasang event onclick pada element dengan ID=”nama_id_element”, maka sekarang sudah tidak bisa diklik lagi.
Demikian pembahasan tentang event DOM. Semoga bermanfaat.