Mengenal berbagai Event di JavaScript

Event merupakan komponen penting dalam proses eksekusi JavaScript.
40  
       

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.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>