BAB 12 — Menguasai Event JavaScript: Interaktivitas Halaman Web Secara Dinamis

Event adalah titik interaksi utama antara pengguna dan halaman web. Dengan memahami event, kita bisa membuat web yang interaktif, responsif, dan dinamis.

JavaScript memungkinkan menangani berbagai jenis event: klik, input, keyboard, mouse, form, dan bahkan event custom.

---

1. Event Listener: Mendengar Aksi Pengguna

Event listener adalah fungsi yang menunggu event terjadi pada elemen DOM.

1.1 Dasar Event Listener

const button = document.querySelector('button');

button.addEventListener('click', function() {
    alert('Tombol diklik!');
});

• addEventListener(event, callback) → cara modern menangani event.
• Mendukung multiple listeners untuk elemen yang sama, berbeda dari onclick.

1.2 Menghapus Event Listener

function handleClick() {
    console.log("Tombol diklik");
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

Tips:

• Gunakan removeEventListener untuk mencegah memory leak pada elemen yang dihapus atau dinamis.

---

2. Event Object: Mendapatkan Informasi Lengkap

Setiap event membawa event object yang memberikan informasi detail tentang aksi pengguna.

button.addEventListener('click', function(event) {
    console.log("Tipe event:", event.type);
    console.log("Elemen target:", event.target);
    console.log("Koordinat mouse:", event.clientX, event.clientY);
});

Properti penting:

• event.type → tipe event, misal “click”, “input”
• event.target → elemen yang memicu event
• event.currentTarget → elemen tempat listener dipasang
• event.preventDefault() → mencegah aksi default browser (misal submit form atau link redirect)
• event.stopPropagation() → menghentikan bubbling

Insight:

• Memahami event object memungkinkan kontrol penuh terhadap interaksi pengguna.
• preventDefault dan stopPropagation penting untuk menghindari konflik event di nested element.

---

3. Bubbling dan Capturing: Memahami Aliran Event

Event di DOM dapat merambat melalui tree dalam dua fase:

1. Capturing (Menurun) → dari root → target
2. Bubbling (Menaik) → dari target → root

document.body.addEventListener('click', () => console.log('Body clicked (capturing)'), true);
document.body.addEventListener('click', () => console.log('Body clicked (bubbling)'), false);

Tips:

• Default listener di addEventListener menggunakan bubbling (false).
• Memahami bubbling & capturing penting saat menangani nested elements agar event tidak ter-trigger ganda.

---

4. Event Delegation: Menangani Banyak Elemen Sekaligus

Alih-alih memasang listener satu per satu, gunakan event delegation pada parent element.

const list = document.querySelector('ul');

list.addEventListener('click', function(e) {
    if(e.target.tagName === 'LI') {
        console.log('Item diklik:', e.target.textContent);
    }
});

Kelebihan:

• Efisien untuk elemen dinamis.
• Mengurangi penggunaan memory listener di banyak elemen.

Kasus nyata:

• Daftar komentar yang bisa bertambah, tombol hapus untuk setiap item, dan menu dropdown dinamis.

---

5. Keyboard Event: Menangkap Input Keyboard

Event keyboard memungkinkan menangkap interaksi pengguna: keydown, keyup, keypress (deprecated).

document.addEventListener('keydown', function(e) {
    console.log('Tombol ditekan:', e.key); // misal "Enter", "ArrowUp"
});

• keydown → saat tombol ditekan
• keyup → saat tombol dilepas
• keypress → sudah deprecated di browser modern

Tips:

• Gunakan keydown untuk navigasi real-time (misal game atau form shortcut).
• Gunakan keyup untuk validasi setelah input selesai.

---

6. Form Handling: Validasi dan Interaksi Dinamis

Form event umum: submit, input, change.

6.1 Menangani Submit Form

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

form.addEventListener('submit', function(e) {
    e.preventDefault(); // mencegah reload halaman
    const inputValue = form.querySelector('input').value;
    console.log('Data form:', inputValue);
});

6.2 Menangani Input Secara Real-Time

form.querySelector('input').addEventListener('input', function(e) {
    console.log('User mengetik:', e.target.value);
});

6.3 Menangani Change Event

form.querySelector('select').addEventListener('change', function(e) {
    console.log('Pilihan berubah:', e.target.value);
});

Insight:

• input → event terjadi setiap karakter diketik.
• change → event terjadi saat fokus pindah.
• Kombinasi listener form + validation memberikan UX lebih baik.

---

7. Event Lanjutan & Tips Praktis

1. Multiple Events

button.addEventListener('mouseenter', () => console.log('Mouse masuk'));
button.addEventListener('mouseleave', () => console.log('Mouse keluar'));

2. Throttle & Debounce

• Gunakan untuk scroll, resize, atau input event agar tidak overload browser.

3. Custom Event

const customEvent = new Event('customEvent');
element.dispatchEvent(customEvent);
element.addEventListener('customEvent', () => console.log('Custom event triggered'));

4. Memory & Performance

• Hapus listener dari elemen yang dihapus untuk mencegah memory leak.
• Gunakan delegation untuk banyak elemen dinamis.

---

8. Praktik Nyata Event

1. Modal / Popup Dinamis

const modal = document.querySelector('.modal');
document.querySelector('.open-btn').addEventListener('click', () => {
    modal.classList.add('visible');
});
document.querySelector('.close-btn').addEventListener('click', () => {
    modal.classList.remove('visible');
});

2. Sortable List / Drag & Drop

• Gunakan dragstart, dragover, drop untuk mengatur elemen dinamis.

3. Live Search / Filter

searchInput.addEventListener('input', e => {
    const filter = e.target.value.toLowerCase();
    items.forEach(item => {
        item.style.display = item.textContent.toLowerCase().includes(filter) ? '' : 'none';
    });
});

---

Kesimpulan

• Event adalah jantung interaktivitas web.
• Memahami event listener, event object, bubbling/capturing, delegation, keyboard, form, dan custom event sangat penting.
• Praktik terbaik:
  1. Gunakan addEventListener dan delegation untuk efisiensi.
  2. Gunakan try/catch + preventDefault untuk form atau AJAX.
  3. Hapus listener saat elemen dihapus untuk mencegah memory leak.
• Event handling yang baik meningkatkan UX, performa, dan maintainability aplikasi web.