Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Menggunakan
addEventListeneruntuk merespons klik, input, dan submit - Memahami event object
- Membuat interaksi sederhana: toggle, counter, dan form validation
Materi Singkat
Semua yang kamu pelajari sejauh ini dieksekusi seketika saat halaman dimuat. Tapi website sungguhan harus bisa merespons aksi pengguna — klik tombol, isi form, tekan keyboard.
Event listener adalah fungsi yang "mendengarkan" kejadian tertentu dan menjalankan kode saat kejadian itu terjadi.
addEventListener
const elemen = document.querySelector("#tombol");
elemen.addEventListener("namaEvent", function(event) {
// kode yang dijalankan saat event terjadi
});
// Atau dengan arrow function
elemen.addEventListener("namaEvent", (event) => {
// kode
});Event yang Paling Umum
// Klik
tombol.addEventListener("click", () => {
console.log("Tombol diklik!");
});
// Input (setiap kali ada perubahan karakter)
inputNama.addEventListener("input", (e) => {
console.log("Nilai sekarang:", e.target.value);
});
// Submit form (saat form dikirim)
form.addEventListener("submit", (e) => {
e.preventDefault(); // cegah reload halaman
console.log("Form dikirim!");
});
// Mouse
elemen.addEventListener("mouseenter", () => { /* saat kursor masuk */ });
elemen.addEventListener("mouseleave", () => { /* saat kursor keluar */ });
// Keyboard
document.addEventListener("keydown", (e) => {
console.log("Tombol ditekan:", e.key);
});Event Object (e)
Saat event terjadi, JavaScript mengirimkan event object yang berisi informasi tentang kejadian tersebut:
tombol.addEventListener("click", (e) => {
console.log(e.target); // elemen yang diklik
console.log(e.target.textContent); // teks di dalamnya
console.log(e.type); // "click"
});
input.addEventListener("input", (e) => {
console.log(e.target.value); // nilai input saat ini
});
form.addEventListener("submit", (e) => {
e.preventDefault(); // SELALU panggil ini pada submit form
const data = new FormData(e.target);
console.log(data.get("nama")); // ambil nilai field bernama "nama"
});e.preventDefault()
Beberapa event punya perilaku default browser yang ingin kita ganti:
- Form
submit→ default: reload halaman - Link
click→ default: navigasi ke URL - Klik kanan → default: buka context menu
e.preventDefault() mencegah perilaku default tersebut.
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listener</title>
<style>
body { font-family: sans-serif; padding: 24px; max-width: 500px; }
button {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
margin: 4px;
}
.btn-primary { background: #2563eb; color: white; }
.btn-secondary { background: #f3f4f6; color: #1a1a1a; }
.counter { font-size: 3rem; font-weight: bold; text-align: center;
color: #2563eb; margin: 16px 0; }
#preview { padding: 12px; background: #f3f4f6; border-radius: 6px;
margin-top: 8px; min-height: 40px; }
.error { color: #dc2626; font-size: 0.875rem; }
</style>
</head>
<body>
<h2>Demo 1: Counter</h2>
<div class="counter" id="angka">0</div>
<button class="btn-primary" id="tambah">+ Tambah</button>
<button class="btn-secondary" id="kurang">- Kurang</button>
<button class="btn-secondary" id="reset">Reset</button>
<hr style="margin: 24px 0;" />
<h2>Demo 2: Preview Input</h2>
<input type="text" id="input-nama" placeholder="Ketik namamu..."
style="width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:6px;font-size:1rem;" />
<div id="preview">Preview muncul di sini...</div>
<hr style="margin: 24px 0;" />
<h2>Demo 3: Form Sederhana</h2>
<form id="form-saya">
<input type="text" name="nama" placeholder="Nama" required
style="width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:6px;font-size:1rem;margin-bottom:8px;" />
<button type="submit" class="btn-primary" style="width:100%;">Kirim</button>
</form>
<p id="pesan-form"></p>
<script>
// Demo 1: Counter
let counter = 0;
const angkaEl = document.querySelector("#angka");
document.querySelector("#tambah").addEventListener("click", () => {
counter++;
angkaEl.textContent = counter;
});
document.querySelector("#kurang").addEventListener("click", () => {
counter--;
angkaEl.textContent = counter;
});
document.querySelector("#reset").addEventListener("click", () => {
counter = 0;
angkaEl.textContent = counter;
});
// Demo 2: Preview input
const inputNama = document.querySelector("#input-nama");
const preview = document.querySelector("#preview");
inputNama.addEventListener("input", (e) => {
const nilai = e.target.value;
if (nilai) {
preview.textContent = `Halo, ${nilai}! Senang berkenalan denganmu.`;
preview.style.color = "#2563eb";
} else {
preview.textContent = "Preview muncul di sini...";
preview.style.color = "#6b7280";
}
});
// Demo 3: Form submit
const form = document.querySelector("#form-saya");
const pesanForm = document.querySelector("#pesan-form");
form.addEventListener("submit", (e) => {
e.preventDefault(); // cegah reload!
const nama = form.querySelector("[name='nama']").value.trim();
if (!nama) {
pesanForm.textContent = "Nama tidak boleh kosong!";
pesanForm.className = "error";
return;
}
pesanForm.textContent = `Halo, ${nama}! Form berhasil dikirim.`;
pesanForm.style.color = "#16a34a";
form.reset();
});
</script>
</body>
</html>Tugas Kecil
Buat halaman event-latihan.html dengan fitur berikut:
-
Tombol toggle warna — klik tombol untuk mengubah warna background halaman antara putih dan biru muda (
#eff6ff). Teks tombol berganti antara "Mode Biru" dan "Mode Putih". -
Live character counter — sebuah
<textarea>dengan batas 150 karakter. Di bawahnya, tampilkan "X/150 karakter". Saat mendekati batas (> 120), tampilkan dalam warna oranye. Saat melebihi 150, cegah input lebih lanjut dan tampilkan pesan error. -
Form tambah item — sebuah input teks dan tombol "Tambah". Saat form disubmit:
- Validasi: input tidak boleh kosong
- Buat elemen list baru dan tambahkan ke daftar di bawah form
- Kosongkan input setelah berhasil