addEventListener dan Objek Peristiwa
Pasang pendengar peristiwa, terima objek Event, gunakan preventDefault dan stopPropagation, serta pahami penggelembungan peristiwa.
addEventListener dan Objek Peristiwa adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Peristiwa?
Peristiwa adalah sinyal yang dipicu browser ketika sesuatu terjadi: pengguna mengeklik, menekan tombol, menggerakkan mouse, halaman dimuat, atau permintaan jaringan selesai. JavaScript merespons peristiwa dengan memasang listener peristiwa.
Sintaks addEventListener
element.addEventListener(type, handler) memasang fungsi yang akan dijalankan saat peristiwa dipicu. Handler menerima objek Event yang berisi detail tentang hal yang terjadi.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Jenis Peristiwa Umum
Mouse: click, dblclick, mouseenter, mouseleave, mousemove. Keyboard: keydown, keyup, keypress. Formulir: submit, input, change, focus, blur. Dokumen: DOMContentLoaded, load. Jendela: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));Objek Peristiwa
Setiap handler menerima objek peristiwa. Properti penting: e.target (elemen yang memicu peristiwa), e.currentTarget (elemen tempat listener dipasang), e.type (nama peristiwa), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() menghentikan tindakan bawaan browser. Gunakan untuk mencegah pengiriman formulir, mencegah navigasi tautan, atau menghentikan menu konteks klik kanan dalam game.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() menghentikan peristiwa agar tidak melakukan bubbling ke atas melalui pohon DOM. Gunakan saat handler elemen bagian dalam tidak boleh memicu handler elemen luar.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Bubbling Peristiwa
Peristiwa melakukan bubbling ke atas — setelah dipicu pada target, peristiwa tersebut dipicu pada parent, lalu grandparent, hingga ke document. Inilah cara kerja delegasi peristiwa: pasang satu listener pada parent dan gunakan e.target untuk mengidentifikasi child yang benar-benar diklik.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Pola Delegasi Peristiwa
Delegasi peristiwa adalah praktik mendengarkan peristiwa pada elemen parent, bukan memasang listener pada setiap child. Cara ini lebih efisien dan secara otomatis menangani child yang ditambahkan secara dinamis.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Peristiwa Keyboard
Peristiwa keyboard dipicu saat tombol ditekan. Gunakan e.key (string seperti 'Enter', 'Escape', 'a') dalam kode modern. Kode lama menggunakan e.keyCode (sudah usang). e.metaKey, e.ctrlKey, dan e.shiftKey mendeteksi tombol pengubah.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Menghapus Listener Peristiwa
Gunakan removeEventListener untuk melepaskan listener. Handler harus berupa referensi fungsi yang sama — fungsi anonim tidak dapat dihapus. Dalam React/Vue, biasanya Anda tidak perlu mengelolanya secara manual.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Opsi once
Berikan { once: true } sebagai argumen ketiga untuk menghapus listener secara otomatis setelah listener tersebut dipicu sekali. Ini berguna untuk tindakan satu kali, seperti menutup layar pembuka.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Opsi capture
Secara default, listener dipicu selama fase bubbling (ke atas). Berikan { capture: true } agar listener dipicu selama fase capturing (ke bawah, sebelum listener milik target).
Pemeriksaan Cepat
Method mana yang menghentikan browser agar tidak menjalankan perilaku bawaannya untuk suatu peristiwa?
Ringkasan: Peristiwa DOM
addEventListener(type, handler) memasang listener. Objek peristiwa menyediakan target, type, dan method pengendali. preventDefault() memblokir perilaku bawaan. stopPropagation() menghentikan bubbling. Gunakan delegasi peristiwa agar efisien dan dapat menangani child dinamis. Hapus listener untuk mencegah kebocoran memori.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “addEventListener dan Objek Peristiwa” gratis?
Ya — teks lengkap “addEventListener dan Objek Peristiwa” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “addEventListener dan Objek Peristiwa”?
Pasang pendengar peristiwa, terima objek Event, gunakan preventDefault dan stopPropagation, serta pahami penggelembungan peristiwa. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 2 dari 4.
Berapa lama pelajaran “addEventListener dan Objek Peristiwa” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- querySelector dan querySelectorAll
- addEventListener dan Objek Peristiwa
- Mengubah Konten: textContent, innerHTML, classList
- Membuat dan Menambahkan Elemen