Pada paradigma permrograman event-driven, kita dituntut untuk membuat alur program berdasarkan event yang sedang terjadi di program. Show 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 membuat 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:
Kita bisa melakukan aksi tertentu untuk merespon event tersebut. Misalnya: Saat elemen 1 diklik, kita bisa jalankan fungsi untuk melakukan sesuatu.Kasi contoh donk? Oke, mari kita bahas! Cara Handle Event di JavascriptAda dua cara yang biasanya dilakukan untuk handle event di Javascript. Cara Pertama: Menggunakan AtributHTML memiliki atribut event untuk menentukan fungsi yang akan dijalankan saat event terjadi. 2 adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript.Selain event 2 ada juga event lainnya seperti 4, 5, 6, 7, dll.Nama-nama atribut event ini tidak perlu kamu hapal, karena jumlahnya cukup banyak. Kalau lupa tinggal lihat saja referensi yang ada pada MDN Web Docs. Cara Kedua: Method addEventListener()Method 8 merupakan method yang terdapat pada object DOM. Object ini mewakili sebuah elemen HTML di Javascript.Jika kamu belum tau apa itu DOM, saya sarankan untuk membaca dulu:
Nah, untuk menghandle sebuah event dengan object DOM. Kita harus memanggil method 9.Perhatikan, penulisan nama event ditulis tanpa menggunakan 0. Jadi, misalnya kita ingin menghandle event klik, maka cukup tulis 1 saja.
Ouya, parameter 2 pada fungsi adalah parameter yang merupakan object event. Jadi kita bisa mengambil data dari object yang mengirim event dari parameter 2. Pada contoh ini, object pengirimnya adalah 4.Parameter ini bersifat opsional, boleh kita berikan, boleh juga tidak. Sampai di sini sudah paham? Biar makin paham, mari kita coba praktik. Latihan: Handle Event di JavascriptKita akan coba beberapa event yang umum dipakai, seperti click, hover, keyup, keydown, change, dll. Buatlah folder baru dengan nama 5. Folder ini akan kita pakai untuk menyimpan file latihan.1. Event KlikEvent 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 6.Oh iya, jika kamu belum tahu tentang dialog di Javascript, silahkan baca:
Oke lanjut ke contoh.. Buatlah file baru dengan nama 7, kemudian isi dengan kode berikut:
Hasilnya: Selain event 1 ada juga event 9 untuk double klik.Mari kita coba! Buatlah file baru dengan nama 0, kemudian isi dengan kode ini:
Hasilnya: Saat kita klik satu kali, event tidak akan terjadi. Tapi saat kita melakukan double klik, maka event terjadi dan fungsi pun dijalankan. 2. Event MouseSelain diklik, berikut ini event yang bisa terjadi karena mouse:
Mari kita coba latihan! Buatlah file baru dengan nama 4, kemudian isi dengan kode berikut:
Hasilnya: Secara kasat mata, event 2 dan 1 terlihat sama. Namun, sebenarnya 1 terjadi setelah 2.3. Event KeyboardBerikut ini beberapa event yang bisa terjadi saat kita menekan keyboard:
Mari kita coba! Buatlah file baru dengan nama 2 kemudian isi dengan kode berikut:
Hasilnya: 4. Event ChangeEvent change biasanya terjadi pada elemen input seperti input text, radio, checkbox, select-option, dll. Event change akan terjadi saat nilai pada elemen tersebut berubah. Mari kita coba! Buatlah file baru dengan nama 3, kemudian isi dengan kode berikut:
Pada contoh ini, kita membuat elemen select-option, kemudian kita mendengarkan event 4 pada elemen tersebut.Maka hasilnya: 5. Event pada FormAda beberapa event yang biasanya terjadi pada form:
Mari kita coba! Buatlah file baru dengan nama 7 kemudian isi dengan kode berikut:
Hasilnya: Pada contoh ini kita menggunakan parameter 8 untuk mengambil data dari object pengirim event, yakni 9.
Parameter 8 sebenarnya bisa kita ganti apa aja, tapi orang biasanya pakai 2 atau 8.Kemudian di dalam fungsi ini kita menjalankan:
Ini berfungsi untuk mencegah aksi default yang dilakukan pada event sebuah event. Pada contoh ini, kita mendengarkan event 5.Nah, biasanya pada event 5 form akan mengirim data dan melakukan reload page.Biar ini tidak dilakukan, maka kita harus menggunakan method 5. Kemudian setelah itu, barulah kita membuat aksi yang kita inginkan.Nah, begitulah beberapa contoh latihan event di Javascript. Berikutnya kita akan belajar tentang cara membuat custom event. Membuat Custom EventSelain mendengarkan (listen) event yang sudah ada, kita juga bisa menciptakan event sendiri. Ada tiga langkah yang harus dilakukan saat membuat custom event:
Berikut ini contoh sintaksnya:
Supaya semakin paham, mari kita coba latihan. Buatlah file HTML baru dengan nama 9, kemudian isi dengan kode berikut: 0Hasilnya: Event 0 terjadi saat kita klik tombol 1.Mengapa begitu? Ini karena kita memicu atau trigger event-nya di sana. Selain klik, kita juga memicu event-nya di mana pun kita mau. Yang penting kita memanggil method 2, maka event tersebut akan di-trigger.Apa Selanjutnya?Event akan sering kamu gunakan dalam membuat aplikasi dengan Javascript. Selain di browser, event juga ada di Nodejs. Selanjutnya silahkan latihan lebih banyak lagi menggunakan event lainnya dan coba juga untuk belajar Event di Nodejs. |