რა არის ივენტის დელეგაცია და რატომ უნდა გამოვიყენოთ იგი?

Question

Accepted Answer

**Event delegation** ნიშნავს **ერთი** श्रোتელის მიერთებას საერთო მშობელი კვანძისკენ, ერთი श्रोतელის ნაცვლად თითოეული შვილის, და **event bubbling** გამოყენებით იმის დასადგენად, რომელი შვილი ნამდვილად ურთიერთქმედებდა (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); }); ``` ## როგორ მუშაობს თუ თქვენ დააჭერთ `

`, ივენტი **ბურბულელიკს** ზეთ: `li → ul → body → document`. श्रोतელი `

` შვილი მიიღო დაწკაპკებებს, და `e.target` გეუბნებათ ზუსტი ელემენტი, რომელზე დაწკაპკდა. `closest("li")` ფეხით მიდის მიზნიდან თავდანთავი ელემენტის პოვნაში (იკრიბება დაწკაპკებებს შიგა ელემენტებზეც). ## რატომ არის ეს ღირებული - **Performance/memory**: ერთი श्रोतელი ასობი ან ათასების ნაცვლად. - **ავტომატურად მუშაობს დინამიკურად დამატებულ ელემენტებზე** — ახლად დამატებული `
` შემდეგ აღარ სჭირდება ახალი श्रोตელი, რადგან მშობელი უკვე მას ამუშავებს. - **უფრო მარტივი ლიკვიდაცია**: ამოღება ერთი श्रोტელი, არა ბევრი. ## შენიშვნა ეს დამოკიდებულია bubbling-ზე, ამიტომ არ მუშაობს ივენტებისთვის, რომელიც **არ გაბურბულელიკს** (`focus`, `blur` — გამოიყენეთ `focusin`/`focusout`). ეს არის ზუსტად ის ტექნიკა, რომელსაც React იყენებს შიგნით (ერთი root श्रोતელი მთელი აპლიკაციისთვის).

როგორ მუშაობს

რატომ არის ეს ღირებული

შენიშვნა