Apa iku event delegation lan kenapa nggunakake?

Question

Accepted Answer

**Event delegation** tegese nelekaké **siji** listener marang ancestor sing umum tinimbang siji listener per child, lan nggunakake **event bubbling** kanggo ngenali anak mana sing bener-bener diinteraksikake (via `event.target`). ```js // ❌ without delegation: one listener PER item (and broken for new items) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ with delegation: ONE listener on the parent document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // find the clicked item if (li) select(li.dataset.id); }); ``` ## Carane ndadosake Ling sampeyan click `

`, event **bubble** munggah: `li → ul → body → document`. Listener ing `

` children, lan `e.target` ngandhani elemen persis sing di-click. `closest("li")` mlaku munggah saka target kanggo nemokake element sing dituju (tangani clicks ing elemen inner uga). ## Kenapa iku berharga - **Performance/memory**: siji listener tinimbang ratusan utawa ribuan. - **Ndadosake kanggo elemen sing ditambahake dinamis otomatis** — `
` anyar sing ditambahake mengko ora perlu listener anyar, amarga parent wis nangani. - **Cleanup sing luwih sederhana**: mbusak siji listener, ora akeh. ## Kaveat Iku gumantung ing bubbling, dadi ora ndadosake kanggo event sing **ora bubble** (`focus`, `blur` — pake `focusin`/`focusout`). Iki persis teknik sing React pake internal (siji root listener kanggo kabeh aplikasi).

Carane ndadosake

Kenapa iku berharga

Kaveat