Halo, teman-teman! Kali ini kita akan belajar tentang Event Handling di JavaScript. Event adalah tindakan yang terjadi di dalam aplikasi, seperti klik tombol, ketikan keyboard, atau perubahan status elemen. Dengan event handling, kita bisa menanggapi aksi-aksi tersebut dengan menjalankan fungsi tertentu.

Apa Itu Event?

Event adalah aksi yang terjadi pada elemen HTML, misalnya ketika pengguna mengklik tombol, menggerakkan mouse, atau mengetik di dalam form. Dengan menggunakan JavaScript, kita bisa menangani event tersebut untuk membuat interaksi yang lebih dinamis di halaman web.

Menambahkan Event Listener

Di JavaScript, kita dapat menangani event dengan menggunakan metode addEventListener(). Metode ini memungkinkan kita untuk menambahkan event handler ke elemen tertentu. Berikut adalah contoh untuk menangani event klik pada sebuah tombol:

Klik Aku!

Pada contoh ini:

• Kita mengambil elemen tombol dengan getElementById.
• Kemudian, kita menambahkan event listener dengan addEventListener() yang akan mendengarkan event klik dan menjalankan fungsi ketika tombol tersebut diklik.

Jenis-Jenis Event

Berikut beberapa jenis event yang sering digunakan dalam JavaScript:

1. click: Terjadi saat elemen diklik.
2. mouseover: Terjadi saat mouse berada di atas elemen.
3. keydown: Terjadi saat tombol keyboard ditekan.
4. submit: Terjadi saat form dikirimkan.
5. input: Terjadi saat data dimasukkan ke dalam form input.

Contoh menangani event mouseover:

Arahkan Mouse ke Sini

Menggunakan Event dengan Parameter

Kadang kita perlu mengetahui lebih banyak informasi tentang event yang terjadi, seperti posisi mouse atau tombol keyboard yang ditekan. Untuk itu, kita bisa menggunakan parameter event di dalam fungsi event handler.

Di sini, kita mendengarkan event input yang terjadi ketika pengguna mengetikkan sesuatu di dalam input field. event.target.value memberi kita akses ke nilai yang sedang diketik.

Menghentikan Event Default

Terkadang, kita tidak ingin aksi default terjadi setelah event ditangani. Misalnya, ketika kita mengirimkan form, kita bisa mencegah halaman untuk reload dengan menggunakan event.preventDefault().

  
  Kirim

Pada contoh ini, ketika form disubmit, event handler akan mencegah form untuk mengirim data dan merefresh halaman, serta menampilkan pesan bahwa form telah dikirim.

Studi Kasus: Membuat Counter Klik

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Mari kita coba membuat aplikasi penghitung klik sederhana yang akan menghitung berapa kali tombol diklik.

HTML-nya:

  
  
  


  
Counter Klik
  
Jumlah klik: 0
  Klik Saya!

  

JavaScript-nya (di file script.js):

let counter = 0;
let tombol = document.getElementById("klikButton");
let tampilkanCounter = document.getElementById("counter");

tombol.addEventListener("click", function() {
  counter++;
  tampilkanCounter.textContent = counter;
});

Penjelasan:

• Kita menyimpan jumlah klik dalam variabel counter.
• Setiap kali tombol diklik, event listener akan menambah nilai counter dan menampilkan jumlah klik terbaru di halaman.

Event handling ini akan sangat membantu untuk menciptakan interaksi yang lebih dinamis di halaman web kamu! Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga dengan event handling, kamu bisa membuat aplikasi web yang lebih interaktif dan menyenangkan!