JavaScript Academy · Pelajaran

Dasar-Dasar addEventListener

Pasang penangan pada elemen untuk menangani peristiwa.

Dasar-Dasar addEventListener adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Merespons Peristiwa

Peristiwa memungkinkan kode Anda merespons tindakan pengguna seperti klik, penekanan tombol, dan pengiriman formulir. addEventListener adalah cara standar untuk berlangganan.

Sintaks Dasar

Panggil addEventListener dengan nama peristiwa dan fungsi penangan. Fungsi penangan tersebut berjalan setiap kali peristiwa terjadi.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Fungsi Penangan Bernama

Anda dapat memberikan fungsi bernama. Hal ini membuat kode tetap teratur dan, yang terpenting, memungkinkan Anda menghapus pendengar tersebut nanti.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Beberapa Pendengar

Berbeda dari properti onclick lama, Anda dapat memasang banyak pendengar untuk peristiwa yang sama tanpa saling menimpa.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Untuk berhenti mendengarkan, panggil removeEventListener dengan nama peristiwa dan referensi fungsi yang sama seperti yang digunakan saat menambahkannya.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Fungsi Anonim Tidak Dapat Dihapus

Fungsi panah sebaris membuat referensi baru setiap kali, sehingga tidak dapat dihapus nanti. Gunakan referensi bernama jika Anda perlu menghapusnya.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

Opsi Sekali

Memberikan { once: true } akan menghapus pendengar secara otomatis setelah pendengar tersebut berjalan satu kali.

btn.addEventListener("click", init, { once: true });

Opsi Penangkapan

Secara bawaan, pendengar berjalan selama fase perambatan naik. { capture: true } membuatnya berjalan selama fase penangkapan.

parent.addEventListener("click", handler, { capture: true });

Opsi Pasif

{ passive: true } menjamin bahwa Anda tidak akan memanggil preventDefault, sehingga peramban dapat mengoptimalkan kinerja pengguliran.

window.addEventListener("scroll", onScroll, { passive: true });

Opsi Sinyal

Sinyal AbortController memungkinkan Anda menghapus satu atau banyak pendengar dengan membatalkan operasi, sehingga praktis untuk pembersihan.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this di Dalam Fungsi Penangan

Dalam fungsi penangan biasa, this merujuk pada elemen tempat pendengar dipasang. Fungsi panah tidak mengikat ulang this.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Pemeriksaan Cepat

Uji aturan penghapusan.

Ringkasan

addEventListener(type, handler, options) berlangganan peristiwa dan mendukung banyak pendengar. Hapus pendengar dengan removeEventListener menggunakan referensi yang sama, jadi utamakan fungsi bernama. Opsi yang berguna meliputi once, capture, passive, dan signal. Dalam fungsi penangan biasa, this adalah elemen target.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar addEventListener” gratis?

Ya — teks lengkap “Dasar-Dasar addEventListener” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar addEventListener”?

Pasang penangan pada elemen untuk menangani peristiwa. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Dasar-Dasar addEventListener” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy