Belajar Javascript: Memahami Event di Javascript

 Pada paradigma permrograman event-driven, kita dituntut untuk membuat alur program berdasarkan event yang sedang terjadi di program.

Javascript sendiri mendukung pemrograman event-driven, karena itulah ada fitur Event pada Javascript.

Nah, pada tutorial ini, kita akan memperlajari tentang Event di Javascript.

Seperti:

Apa itu Event?

Gimana cara membuat event?

dan gimana cara membaut custom event?

Mari kita mulai!

Apa itu Event?

Event secara bahasa artinya kejadian..

Pada Javascript:

Event adalah kejadian yang terjadi di halaman web.

Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.

Misalnya seperti:

• User melakukan scroll;
• User melakukan klik pada elemen tertentu;
• Halaman web di-load;
• Form di-submit;
• dan sebagainya.

Kita bisa melakukan aksi tertentu untuk merespon event tersebut.

Misalnya:

Saat elemen <button> diklik, kita bisa jalankan fungsi untuk melakukan sesuatu.

Ouya, parameter e pada fungsi adalah parameter yang merupakan object event. Jadi kita bisa mengambil data dari object yang mengirim event dari parameter e. Pada contoh ini, object pengirimnya adalah button.

Parameter ini bersifat opsional, boleh kita berikan, boleh juga tidak.

Oke, mari kita bahas!

Cara Handle Event di Javascript

Ada dua cara yang biasanya dilakukan untuk handle event di Javascript.

Cara Pertama: Menggunakan Atribut

HTML memiliki atribut event untuk menentukan fungsi yang akan dijalankan saat event terjadi.

onclick adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript.

Selain event onclick ada juga event lainnya seperti onchange, onmouseover, onkeyup, onload, dll.

Nama-nama atribut event ini tidak perlu kamu hapal, karena jumlahnya cukup banyak. 

1. Event Klik

Event klik termasuk dalam Mouse Event, karena pemicunya adalah aktivitas klik dari mouse atau tap (jika di HP).

Kita bisa memberikan aksi tertentu saat terjadi klik, misalnya menampilkan dialog alert().

2. Event Mouse

Selain diklik, berikut ini event yang bisa terjadi karena mouse:

• mouseover (hover) saat pointer berada di atas element;
• mouseenter saat pointer mendekat pada elemen;
• mouseout saat pointer menjauh dari elemen;

3. Event Keyboard

Berikut ini beberapa event yang bisa terjadi saat kita menekan keyboard:

• keypress: kejadian saat kita menekan dan menahan tombol tertentu;
• keyup: kejadian saat kita berhenti menekan (melepas) tombol tertentu;
• keydown: kejadian saat kita mulai menekan tombol tertentu;

4. Event Change

Event change biasanya terjadi pada elemen input seperti input text, radio, checkbox, select-option, dll. Event change akan terjadi saat nilai pada elemen tersebut berubah.

5. Event pada Form

Ada beberapa event yang biasanya terjadi pada form:

• submit: saat kita melakukan submision atau mengirim data pada form;
• reset: saat kita melakukan clear data pada form;

Membuat Custom Event

Selain mendengarkan (listen) event yang sudah ada, kita juga bisa menciptakan event sendiri.

Ada tiga langkah yang harus dilakukan saat membuat custom event: 1

1. Membuat object baru dengan new Event();
2. Mendengarkan event dengan method addEventListener();
3. Memicu atau trigger event dengan method dispatchEvent().