Menanggapi klik dengan addEventListener

Method addEventListener mendaftarkan sebuah fungsi untuk dijalankan ketika peristiwa tertentu terjadi pada elemen. Argumen pertamanya nama peristiwa dalam bentuk teks, argumen keduanya fungsi penanggapnya.

const tombol = document.querySelector("#hitung");
const hasil = document.querySelector("#hasil");

let klik = 0;
tombol.addEventListener("click", () => {
  klik = klik + 1;
  hasil.textContent = `Ditekan ${klik} kali`;
});

Variabel yang dibuat di luar fungsi penanggap tetap hidup di antara klik, sehingga hitungannya bertambah setiap kali tombol ditekan. Sifat ini yang membuat halaman punya ingatan: jumlah barang di keranjang, pilihan filter yang sedang aktif, atau nomor langkah formulir bertahap disimpan di variabel seperti itu.

Nama peristiwanya tidak terbatas pada click. Formulir memakai "submit" untuk memeriksa isian sebelum dikirim, isian teks memakai "input" untuk menghitung sisa karakter selama orang mengetik, dan daftar pilihan memakai "change". Fungsi penanggap menerima satu argumen berisi keterangan peristiwanya, sehingga tombol.addEventListener("click", (e) => e.preventDefault()) menahan perilaku bawaan tombol di dalam formulir.