ઈવેન્ટ ડેલિગેશન શું છે અને તેનો ઉપયોગ કેમ કરવો?

Question

Accepted Answer

**Event delegation** એટલે કે **એક જ** સાંભાળનારને સામાન્ય પૂર્વજ પર જોડવું બजાય કે દરેક બાળક માટે એક સાંભાળનાર, અને **event bubbling** નો ઉપયોગ કરીને કોણ બાળક સાથે ક્રિયા કરવામાં આવી હતી તે ઓળખવું (`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")` લક્ష્યથી ઉપર ચાલે છે ઈચ્છિત તત્વ શોધવા માટે (આંતરિક તત્વો પર ક્લિક્સ હેન્ડલ કરે છે પણ). ## તે કેમ મૂલ્યવાન છે - **કામગીરી/મેમોરી**: સોગ્વાર કે હજાર બદલે એક સાંભાળનાર. - **ગતિશીલ રીતે ઉમેરાયેલ તત્વો માટે આપમેળે કાર્ય કરે છે** — બાદમાં ઉમેરાયેલ નવો `
` કોઈ નવા સાંભાળનારની જરૂર નથી, કારણ કે પિતૃ તેને પહેલેથી હેન્ડલ કરે છે. - **સરળ સ્વચ્છતા**: એક સાંભાળનાર દૂર કરો, ઘણા નહીં. ## ચેતવણી તે બબલિંગ પર આધાર રાખે છે, તેથી તે ઈવેન્ટ્સ માટે કામ કરતું નથી જે **બબલ નથી** (`focus`, `blur` — `focusin`/`focusout` બદલે ઉપયોગ કરો). આ બરાબર તે તકનીક છે જે React આંતરિક રીતે ઉપયોગ કરે છે (આખી ઍપ માટે એક રુટ સાંભાળનાર).

તે કેવી રીતે કાર્ય કરે છે

તે કેમ મૂલ્યવાન છે

ચેતવણી