Event adalah kejadian di halaman: tombol diklik, huruf diketik, form dikirim. JavaScript bisa menunggu kejadian itu, lalu menjalankan sebuah fungsi tepat saat kejadiannya datang. Alatnya addEventListener, artinya "pasang pendengar".
🧪 Tebakan cepat: fungsi yang kamu kasih ke
addEventListenerjalan kapan, waktu halaman dimuat atau waktu tombolnya diklik? Tebak dulu, jawabannya ada di bagian "Pasang listener di tombol".
Pasang listener di tombol
Halamannya punya <button>Klik Saya</button>. Kodenya:
const button = document.querySelector("button");
button.addEventListener("click", (e) => {
console.log("click:", e.target.textContent);
});
document.querySelector("button")mencari tombol di halaman, lalu menyimpannya di variabelbutton.addEventListenerdipanggil di elemen yang mau didengar. Argumen pertamanya,"click", adalah nama event yang ditunggu.- Argumen keduanya,
(e) => { ... }, adalah fungsi yang dijalankan tiap kali event itu terjadi. Fungsi ini disebut listener. eadalah event object, isinya info soal kejadian itu.e.targetadalah elemen yang kena, di sini tombolnya.
Waktu halaman dimuat, console masih kosong. Klik tombolnya, console mencetak click: Klik Saya. Klik lagi, tercetak lagi. Jadi jawaban tebakannya: listener gak jalan waktu halaman dimuat, dia menunggu sampai tombolnya diklik.
Ubah halaman di dalam listener
Halamannya punya tombol dan <p id="pesan">Belum dibayar</p>:
const tombol = document.querySelector("button");
const pesan = document.querySelector("#pesan");
tombol.addEventListener("click", () => {
pesan.textContent = "Lunas";
});
Sebelum diklik, paragrafnya tetap Belum dibayar. Sesudah diklik, jadi Lunas. textContent adalah teks di dalam elemen, dan mengisinya mengganti teks lama.
Patokannya: kode di luar listener jalan sekali, waktu halaman dimuat. Kode di dalam listener jalan nanti, tiap kali event-nya datang. Kalau baris pesan.textContent = "Lunas" ditaruh di luar, teksnya sudah berubah sebelum ada yang ngeklik.
Baca ketikan dengan event input
const input = document.querySelector("input");
const sapaan = document.querySelector("#sapaan");
input.addEventListener("input", () => {
sapaan.textContent = "Halo, " + input.value;
});
- Event
"input"jalan tiap kali isi kolom berubah, sekali per huruf. input.valueadalah isi kolom saat itu. Karena dibaca di dalam listener, isinya selalu yang terbaru.e.target.valuehasilnya sama."input"dalam tanda kutip adalah nama event.inputtanpa kutip adalah variabel kolomnya.
Ketik Ani, paragrafnya berubah tiga kali: Halo, A, Halo, An, Halo, Ani. Ada juga event "change", tapi dia cuma jalan sekali, waktu kamu selesai mengetik lalu klik di luar kolom.
Event lain, dan membatalkan aksi bawaan
Nama event ditulis huruf kecil, tanpa on: "click" (diklik), "input" (diketik), "change" (selesai diubah), "submit" (form dikirim), "keydown" (tombol keyboard ditekan).
Sebagian event punya aksi bawaan browser. Form yang dikirim, misalnya, bikin halaman dimuat ulang. e.preventDefault() membatalkan aksi bawaan itu:
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Dikirim, halamannya gak dimuat ulang");
});
Melepas listener
removeEventListener butuh fungsi yang sama persis dengan yang dipasang, jadi kasih fungsinya nama dulu:
const tombol = document.querySelector("button");
function sapa() {
console.log("Halo!");
}
tombol.addEventListener("click", sapa);
tombol.removeEventListener("click", sapa);
sapa ditulis tanpa (), karena yang dikirim fungsinya, bukan hasilnya. Fungsi tanpa nama, () => { ... }, gak bisa dilepas begini: menulis ulang isinya tetap bikin fungsi baru.
⚠️ Jebakan yang sering ketemu
- Mengubah teks di luar listener. Teksnya berubah waktu halaman dimuat, bukan waktu diklik. Pindahkan barisnya ke dalam
{ }listener. - Menulis
()sesudah nama fungsi.addEventListener("click", sapa())menjalankansapasaat itu juga. Tulissapasaja. - Nama event yang salah.
"onclick"atau"Click"gak pernah terjadi, jadi listener-nya diam. Tulis"click". onclickcuma muat satu fungsi.tombol.onclick = fnjuga jalan, tapi pasang fungsi kedua dan yang pertama tertimpa.addEventListenerbisa dipasang berkali-kali.
TL;DR: Event adalah kejadian di halaman. elemen.addEventListener("click", fungsi) menjalankan fungsi itu tiap kali event-nya terjadi, bukan waktu halaman dimuat, jadi perubahan halaman ditulis di dalam listener. Event "input" jalan tiap ketikan, dan isi kolomnya ada di input.value. e.preventDefault() membatalkan aksi bawaan browser, dan removeEventListener butuh fungsi yang sama persis dengan yang dipasang.
