क्या सभी jquery घटनाओं को $ (दस्तावेज़) के लिए बाध्य किया जाना चाहिए?

Question

यह कहां से आ रहा है

जब मैंने पहली बार jQuery सीखा, तो मैंने आम तौर पर इस तरह की घटनाओं को जोड़ा:

$('.my-widget a').click(function() {
    $(this).toggleClass('active');
});

चयनकर्ता गति और घटना प्रतिनिधिमंडल के बारे में अधिक जानने के बाद, मैंने कई स्थानों पर पढ़ा कि "jQuery इवेंट प्रतिनिधिमंडल आपके कोड को तेज कर देगा।" इसलिए मैंने इस तरह कोड लिखना शुरू किया:

$('.my-widget').on('click','a',function() {
    $(this).toggleClass('active');
});

यह पदावनत .live () घटना के व्यवहार को दोहराने के लिए अनुशंसित तरीका भी था। जो मेरे लिए बहुत महत्वपूर्ण है क्योंकि मेरी बहुत सारी साइटें हर समय विजेट जोड़ / हटाती हैं। उपरोक्त बिल्कुल वैसा ही व्यवहार नहीं करता है। (हालांकि), चूंकि केवल पहले से मौजूद कंटेनर '.my- विजेट' में जोड़े गए तत्वों को व्यवहार मिलेगा। अगर मैं डायनामिक रूप से उस कोड के चलने के बाद html का एक और ब्लॉक जोड़ देता हूं, तो उन तत्वों को उनसे बंधी हुई घटनाएं नहीं मिलेंगी। ऐशे ही:

setTimeout(function() {
    $('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);

मैं क्या हासिल करना चाहता हूं:

1. के पुराने व्यवहार .live () // जिसका अर्थ है घटनाओं को जोड़ना अभी तक मौजूद तत्व नहीं
2. .on () के लाभ
3. घटनाओं को बांधने के लिए सबसे तेज़ प्रदर्शन
4. घटनाओं को प्रबंधित करने का सरल तरीका

अब मैं इस तरह की सभी घटनाओं को संलग्न करता हूं:

$(document).on('click.my-widget-namespace', '.my-widget a', function() {
    $(this).toggleClass('active');
});

जो मेरे सभी लक्ष्यों को पूरा करता है। (हाँ यह किसी कारण से IE में धीमा है, पता नहीं क्यों?) यह तेज़ है क्योंकि केवल एक घटना एक विलक्षण तत्व से बंधी है और माध्यमिक चयनकर्ता का मूल्यांकन केवल तब होता है जब घटना होती है (कृपया मुझे सही करें अगर यह यहां गलत है)। नाम सूची भयानक है क्योंकि इससे ईवेंट श्रोता को टॉगल करना आसान हो जाता है।

मेरा समाधान / प्रश्न

इसलिए मुझे लगता है कि jQuery की घटनाओं को हमेशा $ (दस्तावेज़) के लिए बाध्य होना चाहिए।
क्या कोई कारण है कि आप ऐसा नहीं करना चाहेंगे?
क्या इसे सबसे अच्छा अभ्यास माना जा सकता है? यदि नहीं, तो क्यों?

यदि आपने यह पूरी बात पढ़ी है, तो धन्यवाद। मैं किसी भी / सभी प्रतिक्रिया / अंतर्दृष्टि की सराहना करता हूं।

मान्यताओं:

1. .on()// कम से कम संस्करण 1.7 का समर्थन करने वाले jQuery का उपयोग करना
2. आप चाहते हैं कि घटना को गतिशील रूप से जोड़ी गई सामग्री में जोड़ा जाए

रीडिंग / उदाहरण:

1. http://24ways.org/2011/your-jquery-now-with-less-suck
2. http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
3. http://www.jasonbuckboyer.com/playground/speed/speed.html
4. http://api.jquery.com/on/

Comments

संभव है कि जावास्क्रिप्ट ईवेंट प्रतिनिधिमंडल को चरम

— बरगी

Answer 1

नहीं - आपको सभी प्रत्यायित ईवेंट हैंडलर को documentऑब्जेक्ट से बाँधना नहीं चाहिए । यह संभवतः सबसे खराब प्रदर्शन वाला परिदृश्य है जिसे आप बना सकते हैं।

सबसे पहले, इवेंट डेलिगेशन हमेशा आपके कोड को तेज नहीं बनाता है। कुछ मामलों में, यह फायदेमंद है और कुछ मामलों में नहीं। आपको इवेंट डेलिगेशन का उपयोग तब करना चाहिए जब आपको वास्तव में इवेंट डेलिगेशन की आवश्यकता हो और जब आप इससे लाभान्वित हों। अन्यथा, आपको इवेंट हैंडलर को सीधे उन ऑब्जेक्ट्स पर बाँध देना चाहिए जहाँ इवेंट होता है क्योंकि यह आम तौर पर अधिक कुशल होगा।

दूसरा, आपको दस्तावेज़ स्तर पर सभी प्रत्यायोजित घटनाओं को नहीं बांधना चाहिए। यह ठीक उसी तरह .live()से निकाला गया था क्योंकि यह बहुत अक्षम है जब आपके पास इस तरह से बहुत सारी घटनाएं होती हैं। प्रत्यायोजित घटना को संभालने के लिए यह सबसे अधिक कुशल है जो उन्हें निकटतम माता-पिता से बांधने के लिए अधिक कुशल है जो गतिशील नहीं है।

तीसरा, सभी घटनाएँ काम नहीं करती हैं या सभी समस्याओं को प्रतिनिधिमंडल के साथ हल किया जा सकता है। उदाहरण के लिए, यदि आप एक इनपुट कंट्रोल पर प्रमुख घटनाओं को इंटरसेप्ट करना चाहते हैं और अमान्य कुंजियों को इनपुट कंट्रोल में दर्ज करने से रोकते हैं, तो आप ऐसा नहीं कर सकते हैं कि प्रत्यायोजित ईवेंट हैंडलिंग के साथ, क्योंकि जब तक यह इवेंट हैंडलर हैंडलर तक पहुँच जाता है, तब तक यह पहले ही हो चुका होता है। इनपुट नियंत्रण द्वारा संसाधित किया गया है और उस व्यवहार को प्रभावित करने के लिए बहुत देर हो चुकी है।

ऐसे समय में जब इवेंट डेलिगेशन आवश्यक या लाभप्रद है:

• जब आप जिन वस्तुओं पर घटनाओं को कैप्चर कर रहे हैं, वे गतिशील रूप से बनाए / निकाले जाते हैं और आप हर बार जब आप एक नया बनाते हैं, तो स्पष्ट रूप से रीबाइंड इवेंट हैंडलर्स के बिना उन पर ईवेंट कैप्चर करना चाहते हैं।
• जब आपके पास बहुत सी वस्तुएं होती हैं जो सभी सटीक एक ही घटना हैंडलर चाहते हैं (जहां बहुत से कम से कम सैकड़ों हैं)। इस मामले में, सैकड़ों या अधिक प्रत्यक्ष इवेंट हैंडलर के बजाय एक प्रतिनिधि ईवेंट हैंडलर को बाइंड करने के लिए सेटअप समय पर यह अधिक कुशल हो सकता है। ध्यान दें, प्रत्यायोजित ईवेंट हैंडलिंग हमेशा प्रत्यक्ष ईवेंट हैंडलर की तुलना में रन-टाइम पर कम कुशल होती है।
• जब आप दस्तावेज़ में किसी भी तत्व पर होने वाली घटनाओं (अपने दस्तावेज़ में उच्च स्तर पर) को पकड़ने की कोशिश कर रहे हैं।
• जब आपका डिज़ाइन स्पष्ट रूप से ईवेंट बुबलिंग और स्टॉपप्रोपैजेशन () का उपयोग करके आपके पेज की कुछ समस्या या सुविधा का समाधान करता है।

---

इसे थोड़ा और समझने के लिए, किसी को यह समझने की आवश्यकता है कि jQuery प्रतिनिधि इवेंट हैंडलर कैसे काम करते हैं। जब आप इस तरह से कुछ कहते हैं:

$("#myParent").on('click', 'button.actionButton', myFn);

यह #myParentऑब्जेक्ट पर एक सामान्य jQuery इवेंट हैंडलर स्थापित करता है । जब एक क्लिक ईवेंट इस प्रत्यायोजित ईवेंट हैंडलर तक पहुँच जाता है, तो jQuery को इस ऑब्जेक्ट से जुड़े डेलीगेटेड ईवेंट हैंडलर की सूची से गुजरना होता है और यह देखना होता है कि ईवेंट के लिए मूल तत्व डेलिगेट इवेंट हैंडलर में सेलेक्टर्स में से किसी से मेल खाते हैं या नहीं।

क्योंकि चयनकर्ता काफी हद तक शामिल हो सकते हैं, इसका मतलब है कि jQuery को प्रत्येक चयनकर्ता को पार्स करना है और फिर मूल इवेंट लक्ष्य की विशेषताओं से तुलना करके यह देखना है कि क्या यह प्रत्येक चयनकर्ता से मेल खाता है। यह सस्ता ऑपरेशन नहीं है। यदि उनमें से केवल एक ही है, तो यह कोई बड़ी बात नहीं है, लेकिन यदि आप अपने सभी चयनकर्ताओं को दस्तावेज़ ऑब्जेक्ट पर रखते हैं और हर एक बुदबुदाती हुई घटना की तुलना करने के लिए सैकड़ों चयनकर्ता थे, तो यह गंभीर रूप से घटना से निपटने के प्रदर्शन को शुरू कर सकता है।

इस कारण से, आप अपने प्रत्यायोजित ईवेंट हैंडलर सेट करना चाहते हैं, इसलिए एक डेलिगेटेड ईवेंट हैंडलर व्यावहारिक रूप से लक्ष्य ऑब्जेक्ट के करीब है। इसका मतलब यह है कि प्रत्येक प्रतिनिधि ईवेंट हैंडलर के माध्यम से कम ईवेंट्स का बुलबुला फूटेगा, इस प्रकार प्रदर्शन में सुधार होगा। दस्तावेज़ ऑब्जेक्ट पर सभी प्रत्यायोजित घटनाओं को डालना सबसे खराब संभव प्रदर्शन है क्योंकि सभी बुदबुदाती घटनाओं को सभी प्रत्यायित इवेंट हैंडलर के माध्यम से जाना पड़ता है और सभी संभावित प्रत्यायित ईवेंट चयनकर्ताओं के खिलाफ मूल्यांकन करना होता है। यह ठीक उसी प्रकार .live()से निकाला गया है क्योंकि .live()ऐसा किया गया था और यह बहुत ही अयोग्य साबित हुआ था।

---

इसलिए, अनुकूलित प्रदर्शन प्राप्त करने के लिए:

1. केवल प्रत्यायोजित ईवेंट हैंडलिंग का उपयोग करें जब यह वास्तव में एक ऐसी सुविधा प्रदान करता है जिसकी आपको आवश्यकता है या प्रदर्शन बढ़ाता है। हमेशा इसका उपयोग न करें क्योंकि यह आसान है क्योंकि जब आपको वास्तव में इसकी आवश्यकता नहीं होती है। यह वास्तव में प्रत्यक्ष घटना बंधन की तुलना में घटना प्रेषण समय में बदतर प्रदर्शन करता है।
2. संभव इवेंट के स्रोत के लिए निकटतम माता-पिता को ईवेंट हैंडलर संलग्न करें। यदि आप प्रत्यायोजित ईवेंट हैंडलिंग का उपयोग कर रहे हैं क्योंकि आपके पास डायनामिक तत्व हैं जिनके लिए आप ईवेंट कैप्चर करना चाहते हैं, तो निकटतम पैरेंट का चयन करें जो स्वयं डायनेमिक नहीं है।
3. प्रत्यायोजित ईवेंट हैंडलर के लिए आसानी से मूल्यांकन करने वाले चयनकर्ताओं का उपयोग करें। यदि आपने यह देखा कि प्रतिनिधि ईवेंट हैंडलिंग कैसे काम करता है, तो आप समझेंगे कि एक प्रत्यायोजित ईवेंट हैंडलर की तुलना कई बार बहुत सारी वस्तुओं से की जानी चाहिए ताकि संभव के रूप में चयनकर्ता जितना संभव हो सके या अपनी कक्षाओं में साधारण कक्षाओं को जोड़ सके ताकि सरल चयनकर्ताओं का उपयोग किया जा सके। प्रतिनिधि ईवेंट हैंडलिंग के प्रदर्शन को बढ़ाएं।

Comments

बहुत बढ़िया। त्वरित और विस्तृत विवरण के लिए धन्यवाद। यह समझ में आता है कि .on () का उपयोग करके ईवेंट प्रेषण का समय बढ़ जाएगा, लेकिन मुझे लगता है कि मैं अभी भी प्रारंभिक ईवेंट पेजिंग टीम बनाम बढ़ी हुई ईवेंट प्रेषण समय के बीच निर्णय लेने में संघर्ष कर रहा हूं। मैं आमतौर पर प्रारंभिक पृष्ठ समय में कमी के लिए हूं। उदाहरण के लिए, यदि मेरे पास एक पृष्ठ पर 200 तत्व हैं (और अधिक घटनाओं के रूप में), यह प्रारंभिक लोड पर लगभग 100 गुना अधिक महंगा है (क्योंकि इसमें 100 ईवेंट श्रोताओं को जोड़ना है) इसके बजाय अगर मैं एक विलक्षण घटना श्रोता को जोड़ता हूं माता-पिता कंटेनर लिंक

— बक

यह भी कहना चाहता था कि आपने मुझे आश्वस्त किया है - सभी घटनाओं को $ (दस्तावेज़) में न बांधें। संभव के रूप में निकटतम कोई नहीं बदलने वाले माता-पिता से बंधे। मुझे लगता है कि मुझे अभी भी एक केस-बाय-केस के आधार पर फैसला करना होगा जब इवेंट डेलिगेशन किसी इवेंट को सीधे किसी तत्व से बाँधने से बेहतर है। और जब मुझे गतिशील सामग्री से जुड़ी घटनाओं की आवश्यकता होती है (जिसमें एक गैर-बदलते माता-पिता नहीं हैं) तो मुझे लगता है कि मैं वही करता रहूँगा जो @Vega नीचे सुझाता है और सामग्री डालने के बाद बस हैंडलर (ओं) को बांधें () ) डोम ", मेरे चयनकर्ता में jQuery के संदर्भ पैरामीटर का उपयोग करते हुए।

— बक

@ user1394692 - यदि आपके पास लगभग समान तत्व हैं, तो यह उनके लिए प्रतिनिधि इवेंट हैंडलर का उपयोग करने के लिए समझ में आ सकता है। मैं कहता हूं कि मेरे जवाब में। यदि मेरे पास एक विशाल 500 पंक्ति की मेज थी और किसी विशेष स्तंभ की प्रत्येक पंक्ति में एक ही बटन था, तो मैं सभी बटन परोसने के लिए मेज पर एक प्रतिनिधि ईवेंट हैंडलर का उपयोग करूंगा। लेकिन अगर मेरे पास 200 तत्व हैं और वे सभी को अपने स्वयं के अनूठे ईवेंट हैंडलर की आवश्यकता है, तो 200 डेलीगेटेड ईवेंट हैंडलर स्थापित करना 200 सीधे बाउंड ईवेंट हैंडलर स्थापित करने की तुलना में कोई तेज़ नहीं है, फिर भी ईवेंट के निष्पादन पर सौंप दिया गया इवेंट हैंडलिंग बहुत धीमा हो सकता है।

— २०

आप सही हैं। पूर्णतया सहमत! क्या मैं समझता हूं कि यह सबसे बुरी चीज है जो मैं कर सकता हूं - $(document).on('click', '[myCustomAttr]', function () { ... });?

— आर्टेम फिटिस्किन

Pjax / turbolinks का उपयोग करना एक दिलचस्प समस्या है क्योंकि सभी तत्व गतिशील रूप से निर्मित / हटाए गए हैं (पहले पृष्ठ लोड के अलावा)। तो क्या सभी घटनाओं को एक बार में बांधना बेहतर है document, या अधिक विशिष्ट चयनों को बांधना page:loadऔर इन घटनाओं को रोकना है page:after-remove? हम्म

— डोम क्रिस्टी

Answer 2

ईवेंट डेलिगेशन आपके हैंडलर को लिखने की एक तकनीक है इससे पहले कि तत्व वास्तव में डोम में मौजूद है। इस पद्धति के अपने नुकसान हैं और इसका उपयोग केवल तभी किया जाना चाहिए जब आपके पास ऐसी आवश्यकताएं हों।

आपको इवेंट डेलिगेशन का उपयोग कब करना चाहिए?

1. जब आप अधिक तत्वों के लिए एक सामान्य हैंडलर को बांधते हैं जिन्हें समान कार्यक्षमता की आवश्यकता होती है। (पूर्व: टेबल रोवर होवर)
   • उदाहरण में, यदि आपको डायरेक्ट बाइंड का उपयोग करके सभी पंक्तियों को बांधना था, तो आप उस तालिका में n पंक्तियों के लिए n हैंडलर बनाना समाप्त करेंगे। प्रतिनिधिमंडल विधि का उपयोग करके आप 1 सरल हैंडलर में उन सभी को संभाल सकते हैं।
2. जब आप DOM में अधिक बार डायनामिक कंटेंट जोड़ते हैं (उदा: किसी तालिका से पंक्तियाँ जोड़ें / निकालें)

आपको इवेंट डेलिगेशन का उपयोग क्यों नहीं करना चाहिए?

1. इवेंट को सीधे तत्व से बांधने की तुलना में इवेंट डेलिगेशन धीमा है।
   • यह हर बुलबुले पर लक्ष्य चयनकर्ता की तुलना करता है, जो हिट होता है, तुलना करना उतना ही महंगा होगा जितना कि यह जटिल है।
2. जब तक यह उस तत्व से नहीं टकराता है, जब तक यह उस तत्व से टकराता नहीं है, तब तक घटना पर कोई नियंत्रण नहीं होता है।

पुनश्च: गतिशील सामग्री के लिए भी आपको ईवेंट डेलिगेशन विधि का उपयोग नहीं करना पड़ता है यदि आप डोम में सम्मिलित होने के बाद हैंडलर को बांधते हैं। (यदि डायनेमिक कंटेंट को बार-बार हटाया / दोबारा नहीं जोड़ा गया)

Answer 3

जाहिर है, घटना प्रतिनिधिमंडल वास्तव में अब सिफारिश की है। कम से कम वेनिला जेएस के लिए।

https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/

"वेब प्रदर्शन # ऐसा लगता है कि दस्तावेज़ में प्रत्येक क्लिक को सुनने के लिए प्रदर्शन खराब होगा, लेकिन यह वास्तव में व्यक्तिगत वस्तुओं पर ईवेंट श्रोताओं का एक समूह होने की तुलना में अधिक प्रदर्शनकारी है।"

Answer 4

मैं jfriend00 के उत्तर में कुछ टिप्पणी और प्रतिवाद जोड़ना चाहूंगा। (मेरी आंत भावना के आधार पर ज्यादातर मेरी राय)

नहीं - आपको सभी प्रत्यायित ईवेंट हैंडलर को दस्तावेज़ ऑब्जेक्ट में बाँधना नहीं चाहिए। यह संभवतः सबसे खराब प्रदर्शन वाला परिदृश्य है जिसे आप बना सकते हैं।

सबसे पहले, इवेंट डेलिगेशन हमेशा आपके कोड को तेज नहीं बनाता है। कुछ मामलों में, यह फायदेमंद है और कुछ मामलों में नहीं। आपको इवेंट डेलिगेशन का उपयोग तब करना चाहिए जब आपको वास्तव में इवेंट डेलिगेशन की आवश्यकता हो और जब आप इससे लाभान्वित हों। अन्यथा, आपको इवेंट हैंडलर को सीधे उन ऑब्जेक्ट्स पर बाँध देना चाहिए जहाँ इवेंट होता है क्योंकि यह आम तौर पर अधिक कुशल होगा।

हालांकि यह सच है कि प्रदर्शन थोड़ा बेहतर हो सकता है यदि आप केवल एक ही तत्व के लिए पंजीकरण और ईवेंट करने जा रहे हैं, मेरा मानना ​​है कि यह शिष्टता लाभ के खिलाफ वजन नहीं करता है जो प्रतिनिधिमंडल लाता है। मेरा यह भी मानना ​​है कि ब्राउजर इसे (और अधिक कुशलता से) संभाल रहे हैं, हालांकि मेरे पास इसका कोई प्रमाण नहीं है। मेरी राय में, इवेंट डेलिगेशन जाने का रास्ता है!

दूसरा, आपको दस्तावेज़ स्तर पर सभी प्रत्यायोजित घटनाओं को नहीं बांधना चाहिए। यह वास्तव में ऐसा क्यों है। लिव () को अपदस्थ किया गया था क्योंकि यह बहुत अक्षम है जब आपके पास इस तरह से बहुत सारी घटनाएं होती हैं। प्रत्यायोजित घटना से निपटने के लिए यह सबसे अधिक कुशल है जो उन्हें निकटतम माता-पिता से बांधने के लिए अधिक कुशल है जो गतिशील नहीं है।

मैं इस पर सहमत हूं। यदि आप 100% सुनिश्चित हैं कि एक घटना केवल एक कंटेनर के अंदर ही होगी, तो इस कंटेनर में इस घटना को बांधने का कोई मतलब नहीं है, लेकिन मैं फिर भी सीधे ट्रिगरिंग तत्व के लिए बाध्यकारी घटनाओं के खिलाफ बहस करूंगा।

तीसरा, सभी घटनाएँ काम नहीं करती हैं या सभी समस्याओं को प्रतिनिधिमंडल के साथ हल किया जा सकता है। उदाहरण के लिए, यदि आप एक इनपुट कंट्रोल पर प्रमुख घटनाओं को इंटरसेप्ट करना चाहते हैं और अमान्य कुंजियों को इनपुट कंट्रोल में दर्ज करने से रोकते हैं, तो आप ऐसा नहीं कर सकते हैं कि प्रत्यायोजित ईवेंट हैंडलिंग के साथ, क्योंकि जब तक यह इवेंट हैंडलर हैंडलर तक पहुँच जाता है, तब तक यह पहले ही हो चुका होता है। इनपुट नियंत्रण द्वारा संसाधित किया गया है और उस व्यवहार को प्रभावित करने के लिए बहुत देर हो चुकी है।

यह बिल्कुल सही नहीं है। कृपया इस कोड को देखें: https://codepen.io/pwkip/pen/jObGmjq

document.addEventListener('keypress', (e) => {
    e.preventDefault();
});

यह दिखाता है कि आप दस्तावेज़ पर कीपर इवेंट को पंजीकृत करके किसी उपयोगकर्ता को टाइप करने से कैसे रोक सकते हैं।

ऐसे समय में जब इवेंट डेलिगेशन आवश्यक या लाभप्रद है:

जब आप जिन वस्तुओं पर घटनाओं को कैप्चर कर रहे हैं, वे गतिशील रूप से बनाई गई / हटा दी जाती हैं और आप हर बार जब आप एक नया बनाते हैं, तो स्पष्ट रूप से रीबाइंड इवेंट हैंडलर्स के बिना उन पर ईवेंट कैप्चर करना चाहते हैं। जब आपके पास बहुत सी वस्तुएं होती हैं जो सभी सटीक एक ही घटना हैंडलर चाहते हैं (जहां बहुत से कम से कम सैकड़ों हैं)। इस मामले में, सैकड़ों या अधिक प्रत्यक्ष इवेंट हैंडलर के बजाय एक प्रतिनिधि ईवेंट हैंडलर को बाइंड करने के लिए सेटअप समय पर यह अधिक कुशल हो सकता है। ध्यान दें, प्रत्यायोजित ईवेंट हैंडलिंग हमेशा प्रत्यक्ष ईवेंट हैंडलर की तुलना में रन-टाइम पर कम कुशल होती है।

मैं इस उद्धरण के साथ https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c से उत्तर देना चाहूंगा

Event delegation promotes binding as few DOM event handlers as possible, since each event handler requires memory. For example, let’s say that we have an HTML unordered list we want to bind event handlers to. Instead of binding a click event handler for each list item (which may be hundreds for all we know), we bind one click handler to the parent unordered list itself.

इसके अलावा, performance cost of event delegation googleघटना के प्रतिनिधिमंडल के पक्ष में अधिक परिणाम के लिए googling ।

जब आप दस्तावेज़ में किसी भी तत्व पर होने वाली घटनाओं (अपने दस्तावेज़ में उच्च स्तर पर) को पकड़ने की कोशिश कर रहे हैं। जब आपका डिज़ाइन स्पष्ट रूप से ईवेंट बुबलिंग और स्टॉपप्रोपैजेशन () का उपयोग करके आपके पेज की कुछ समस्या या सुविधा का समाधान करता है। इसे थोड़ा और समझने के लिए, किसी को यह समझने की आवश्यकता है कि jQuery प्रतिनिधि इवेंट हैंडलर कैसे काम करते हैं। जब आप कुछ इस तरह कहते हैं:

$ ("# myParent")। ('पर क्लिक करें', 'बटन.एक्शनबटन', myFn); यह #myParent ऑब्जेक्ट पर एक सामान्य jQuery इवेंट हैंडलर स्थापित करता है। जब एक क्लिक ईवेंट इस प्रत्यायोजित ईवेंट हैंडलर तक पहुँच जाता है, तो jQuery को इस ऑब्जेक्ट से जुड़े डेलीगेटेड ईवेंट हैंडलर की सूची से गुजरना होता है और यह देखना होता है कि ईवेंट के लिए मूल तत्व डेलिगेट इवेंट हैंडलर में सेलेक्टर्स में से किसी से मेल खाते हैं या नहीं।

क्योंकि चयनकर्ता काफी हद तक शामिल हो सकते हैं, इसका मतलब है कि jQuery को प्रत्येक चयनकर्ता को पार्स करना है और फिर मूल इवेंट लक्ष्य की विशेषताओं से तुलना करके यह देखना है कि क्या यह प्रत्येक चयनकर्ता से मेल खाता है। यह सस्ता ऑपरेशन नहीं है। यदि उनमें से केवल एक ही है, तो यह कोई बड़ी बात नहीं है, लेकिन यदि आप अपने सभी चयनकर्ताओं को दस्तावेज़ ऑब्जेक्ट पर रखते हैं और हर एक बुदबुदाती हुई घटना की तुलना करने के लिए सैकड़ों चयनकर्ता थे, तो यह गंभीर रूप से घटना से निपटने के प्रदर्शन को शुरू कर सकता है।

इस कारण से, आप अपने प्रत्यायोजित ईवेंट हैंडलर सेट करना चाहते हैं, इसलिए एक डेलिगेटेड ईवेंट हैंडलर व्यावहारिक रूप से लक्ष्य ऑब्जेक्ट के करीब है। इसका मतलब यह है कि प्रत्येक प्रतिनिधि ईवेंट हैंडलर के माध्यम से कम ईवेंट्स का बुलबुला फूटेगा, इस प्रकार प्रदर्शन में सुधार होगा। दस्तावेज़ ऑब्जेक्ट पर सभी प्रत्यायोजित घटनाओं को डालना सबसे खराब संभव प्रदर्शन है क्योंकि सभी बुदबुदाती घटनाओं को सभी प्रत्यायित इवेंट हैंडलर के माध्यम से जाना पड़ता है और सभी संभावित प्रत्यायित ईवेंट चयनकर्ताओं के खिलाफ मूल्यांकन करना होता है। यह वास्तव में ऐसा क्यों है। लिव () को पदावनत किया जाता है क्योंकि यह वही है। लिलिव () ने किया और यह बहुत अक्षम साबित हुआ।

यह कहाँ प्रलेखित है? अगर यह सच है, तो jQuery बहुत ही अक्षम तरीके से प्रतिनिधिमंडल को संभाल रहा है, और फिर मेरे काउंटर-तर्क केवल वेनिला जेएस पर लागू होने चाहिए।

फिर भी: मैं इस दावे का समर्थन करने वाला एक आधिकारिक स्रोत खोजना चाहूंगा।

:: संपादित ::

लगता है जैसे jQuery वास्तव में बहुत ही अक्षम तरीके से घटना बुदबुदा रहा है (क्योंकि वे IE8 का समर्थन करते हैं) https://api.jquery.com/on/#event-performance

इसलिए मेरे अधिकांश तर्क केवल वेनिला जेएस और आधुनिक ब्राउज़रों के लिए सही हैं।