1. Siklus Hidup Event: Tiga Fase Propagasi
Ketika user mengklik sebuah elemen di halaman web (misal tombol di dalam kartu), browser tidak langsung memicu event di tombol tersebut secara terisolasi. Event melalui 3 fase propagasi:
2. event.stopPropagation() vs event.preventDefault()
3. Pola Event Delegation: Ringan & Efisien
Daripada memasang ratusan event listener pada setiap tombol di dalam tabel dinamis, kita hanya memasang **satu event listener pada elemen pembungkus (parent)** dan memanfaatkan bubbling untuk mendeteksi tombol mana yang diklik via `event.target.closest()`.
example.js
javascript
| 1 | const todoList = document.querySelector('#todo-list'); |
| 2 | |
| 3 | // 1 listener tunggal menangani ribuan item todo yang ditambah dinamis: |
| 4 | todoList.addEventListener('click', (event) => { |
| 5 | const deleteBtn = event.target.closest('.btn-delete'); |
| 6 | if (deleteBtn) { |
| 7 | const itemId = deleteBtn.dataset.id; |
| 8 | console.log('Menghapus todo id:', itemId); |
| 9 | } |
| 10 | }); |