Event JavaScript: Merespons Interaksi Pengguna

Akhirnya kita sampai di bagian terakhir, dan justru inilah bagian yang menyatukan semuanya. Kamu sudah bisa menyimpan data, menulis logika, dan mengubah isi halaman lewat DOM. Tapi sampai sekarang, kodemu cuma jalan sekali waktu halaman dimuat, habis itu diam. Nah, event inilah yang bikin kodemu bisa menunggu sampai pengguna melakukan sesuatu — mengeklik tombol, mengetik di sebuah kolom, mengirim form — lalu menanggapinya. Inilah denyut nadi dari setiap website yang interaktif.

Di artikel JavaScript yang paling awal dulu, kita pernah bilang bahwa pada intinya JavaScript itu soal “sebuah event, dan kode yang bereaksi terhadapnya.” Di sinilah ide itu benar-benar terwujud. Yuk, kita bikin halaman jadi sungguh-sungguh interaktif.

Event itu apa

Event adalah sesuatu yang terjadi di halaman, biasanya gara-gara pengguna. Klik itu event. Menekan tombol keyboard itu event. Mengirim form, menggerakkan kursor, halaman yang baru selesai dimuat — semuanya event. Browser tanpa henti memunculkan event setiap kali pengguna berinteraksi dengan halaman.

Tugasmu adalah mendengarkan event yang kamu butuhkan, lalu menjalankan kode begitu event itu terjadi. Fungsi yang kamu siapkan untuk itu disebut event handler — fungsi ini “menangani” event-nya dengan cara dijalankan sebagai respons. Intinya cuma satu kalimat: ketika event ini terjadi pada elemen ini, jalankan fungsi ini.

addEventListener: alat utamanya

Cara standar untuk mendengarkan sebuah event adalah lewat method addEventListener. Kamu memanggilnya pada sebuah elemen, lalu memberi tahu dua hal: event apa yang ingin didengarkan, dan fungsi apa yang harus dijalankan saat event itu muncul.

const tombol = document.querySelector("button");

tombol.addEventListener("click", () => {
  console.log("Tombolnya diklik!");
});

Coba baca pelan-pelan: “pada tombol, dengarkan event click, dan begitu terjadi, jalankan fungsi ini.” Jadi setiap kali pengguna mengeklik tombol itu, fungsinya jalan dan pesannya tercetak. Klik lima kali, fungsinya jalan lima kali juga. Halamanmu sekarang benar-benar menanggapi pengguna.

Polanya selalu sama: elemen.addEventListener("namaEvent", fungsiHandler). Argumen pertama adalah nama event dalam bentuk string ("click", "input", dan seterusnya), dan argumen kedua adalah fungsi yang mau dijalankan.

Event yang umum dipakai

"click" memang yang paling sering kamu butuhkan, tapi sebenarnya ada banyak jenis event untuk interaksi yang berbeda-beda. Ini beberapa yang bakal sering kamu temui:

Tiap event memberimu cara untuk menanggapi interaksi yang berbeda. Contohnya, "input" inilah yang membuat fitur pencarian langsung bisa jalan — kamu mendengarkan input pada kotak pencarian, lalu memperbarui hasilnya sambil pengguna mengetik:

const kotakCari = document.querySelector("#search");

kotakCari.addEventListener("input", () => {
  console.log("Teks saat ini:", kotakCari.value);
});

Coba perhatikan kotakCari.value — begitulah cara membaca teks terkini dari sebuah kolom input. Setiap kali kamu menekan tombol, event input ikut terpicu, jadi teksnya kelihatan ter-update secara langsung.

Objek event

Fungsi handler-mu boleh menerima satu argumen, yaitu objek event — objek yang membawa informasi soal apa yang barusan terjadi. Lazimnya argumen ini diberi nama event (atau cukup e saja):

tombol.addEventListener("click", (event) => {
  console.log(event.target);   // elemen yang diklik
});

Objek event menyimpan beberapa property yang berguna — event.target menunjuk ke elemen tempat event terjadi, dan untuk event keyboard, event.key memberi tahu tombol mana yang ditekan. Memang tidak selalu kamu butuhkan, tapi dia selalu siap saat dibutuhkan.

Salah satu yang paling sering dipakai adalah event.preventDefault(), yaitu untuk menghentikan perilaku bawaan browser. Contoh klasiknya ada pada form: secara default, mengirim form akan me-reload halaman. Kalau kamu mau menanganinya sendiri pakai JavaScript, perilaku default tadi harus kamu cegah dulu:

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // cegah halaman supaya tidak me-reload
  console.log("Form ditangani oleh JavaScript!");
});

Menyatukan semuanya: sebuah fitur utuh

Sekarang mari kita bangun sesuatu yang nyata, yang memakai semua hal dari section ini sekaligus — memilih elemen DOM, sebuah event, sebuah kondisional, dan memperbarui halaman. Kita bikin penambah to-do sederhana: ketik sebuah tugas, klik tombol, lalu tugasnya langsung muncul di daftar.

HTML-nya:

<input id="task-input" type="text" />
<button id="add-btn">Tambah Tugas</button>
<ul id="task-list"></ul>

JavaScript-nya:

const input = document.querySelector("#task-input");
const tombol = document.querySelector("#add-btn");
const daftar = document.querySelector("#task-list");

tombol.addEventListener("click", () => {
  const teks = input.value;

  if (teks === "") {
    return;   // kalau input kosong, jangan lakukan apa-apa
  }

  const li = document.createElement("li");
  li.textContent = teks;
  daftar.appendChild(li);

  input.value = "";   // kosongkan input untuk tugas berikutnya
});

Coba berhenti sebentar dan resapi apa yang barusan terjadi. Saat tombol diklik, kodenya membaca isi teks dari input, mengecek apakah teksnya kosong (di sinilah kondisional dipakai), membuat elemen <li> baru (DOM), mengisinya dengan teks tadi, menambahkannya ke daftar, lalu mengosongkan kembali input-nya. Pengguna mengetik tugas, mengeklik, dan melihat tugasnya muncul — sebuah fitur yang sungguh-sungguh interaktif, dirakit utuh dari potongan-potongan yang sudah kamu pelajari. Inilah pengembangan web yang sebenarnya.

Penutup — sekaligus akhir perjalanan frontend

Event-lah yang menghidupkan halamanmu, dan sekarang kamu sudah bisa membangun interaktivitas:

• Event adalah sesuatu yang terjadi di halaman (klik, tekanan tombol, pengiriman form); kodemu mendengarkannya, lalu bereaksi.
• addEventListener("event", handler) adalah cara standar untuk merespons event — lebih rapi dan lebih fleksibel ketimbang onclick inline.
• Event yang umum mencakup click, input, submit, serta event mouse dan keyboard; baca nilai input dengan .value.
• Objek event (event.target, event.key) membawa detailnya, dan event.preventDefault() menghentikan perilaku bawaan browser — wajib tahu untuk form dan tautan.
• Begitu event, DOM, kondisional, dan teknik lain digabung, kamu sudah bisa membuat fitur yang utuh dan interaktif.

Dengan ini, kamu sudah sampai di penghujung dasar-dasar frontend. Coba tengok lagi sejauh mana kamu sudah melangkah: dari menulis tag HTML pertamamu, menata halaman dengan CSS, sampai memprogram lewat JavaScript dan membuat halaman menanggapi pengguna. Ketiga lapisan itu — struktur, tampilan, dan perilaku — adalah fondasi dari segala hal di web, dan sekarang kamu sudah paham ketiganya.

Hal paling bermanfaat yang bisa kamu lakukan sekarang adalah membangun. Pakai potongan-potongan ini untuk membuat sesuatu yang kecil tapi milikmu sendiri — daftar to-do, kalkulator tip, atau halaman interaktif sederhana. Satu proyek nyata akan mengajarimu jauh lebih banyak daripada artikel mana pun, dan kamu sudah punya semua bekal yang dibutuhkan untuk mulai.