event delegation समझाइए और बताइए कि हर element पर listener लगाने की जगह आप इसे कब इस्तेमाल करेंगे।

event delegation का मतलब है किसी साझा पूर्वज पर एक listener लगाना और event.target से यह पता करना कि किस वंशज पर बात हुई। यह इसलिए काम करता है कि ज़्यादातर events target से ऊपर उसके पूर्वजों तक bubble करते हैं। इसे उन lists के लिए इस्तेमाल करें जो अक्सर बदलती हैं या बड़ी हैं, क्योंकि आप सैकड़ों listeners लगाने और हटाने से बच जाते हैं। जो events bubble नहीं करते, जैसे focus, blur और ज़्यादातर media events, उनके लिए इसे छोड़ दें।

हर row पर click listener लगाने की जगह मैं container पर एक लगाता हूं और event.target पढ़ता हूं, फिर closest से ऊपर चलकर वह row ढूंढता हूं जिसकी मुझे परवाह है। यह इसलिए चलता है कि click जिस चीज़ पर सच में हुआ वहां से उसके पूर्वजों तक bubble करता है, तो container अपने नीचे सब कुछ देख लेता है। दो फायदे हैं: मैं सैकड़ों listeners बना और मिटा नहीं रहा, और बाद में जुड़ने वाली rows बिना दोबारा binding किए काम करती हैं। पेच बताने लायक हैं: focus और blur bubble नहीं करते, तो उनके लिए मैं focusin और focusout इस्तेमाल करता हूं, और अगर target तथा मेरे container के बीच का कोई कोड stopPropagation कर दे तो मेरा handler चुपचाप चलना बंद कर देता है, और वह सच में चिढ़ाने वाला bug है। मुझे यह ज़्यादातर एक table में मिला जहां किसी अंदरूनी component ने अपना menu बंद करने के लिए propagation रोका और चुपचाप row selection मार दी। आजकल मुझे delegation आमतौर पर framework से मुफ्त मिल जाती है, पर बड़ी virtualized lists और framework के पेड़ के बाहर render होने वाली चीज़ों के लिए मैं अब भी इसे सीधे इस्तेमाल करता हूं।