दिलचस्प पोस्ट
जावास्क्रिप्ट में iframe तत्वों का उपयोग करें अप्रबंधित C ++ क्लाइंट के लिए WCF सेवा बनाएँ नेट में प्राथमिकता कतार आर में कंसोल को साफ़ करने के लिए फ़ंक्शन क्या जावास्क्रिप्ट में ऑब्जेक्ट घोषित होने के दौरान मैं अन्य प्रॉपर्टी का संदर्भ दे सकता हूं? आप 'अधिभार' क्यों नहीं कर सकते। ' सी ++ में ऑपरेटर? सरल एनीमेशन का उपयोग टिनकेनेटर C / C + int बनाम int * (पॉइंटर्स बनाम सरणी नोटेशन)। अंतर क्या है? MySQL डाटाबेस से कनेक्ट करते समय SSL कनेक्शन के बारे में चेतावनी सीएसएस का उपयोग करके पाठ छुपाएं जावास्क्रिप्ट अनुरोध फुलस्क्रीन अविश्वसनीय है अपाचे एचटीटीपी क्लाइंट 4.0.3 – मैं POST अनुरोध के लिए sessionID के साथ कुकी कैसे सेट करूँ? जावास्क्रिप्ट में स्ट्रिंग में स्ट्रिंग को कैसे परिवर्तित करें? एन की गणना करने के लिए तेज़ तरीका! आधुनिक एम जहां एम प्रमुख है? var फ़ंक्शननाम = समारोह () {} बनाम फ़ंक्शन functionName () {}

प्रत्यक्ष बनाम नियुक्त – jQuery .on ()

मैं jQuery और .on () विधि का उपयोग करके प्रत्यक्ष और प्रतिनिधि ईवेंट हैंडलर्स के बीच इस विशेष अंतर को समझने की कोशिश कर रहा हूं। विशेष रूप से, इस अनुच्छेद में अंतिम वाक्य:

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

"किसी भी तत्व के लिए हैंडलर चलाता है" इसका क्या अर्थ है? मैंने अवधारणा के साथ प्रयोग करने के लिए एक परीक्षण पृष्ठ बनाया लेकिन दोनों के निर्माण के बाद ही एक ही व्यवहार के लिए सीसा:

 $("div#target span.green").on("click", function() { alert($(this).attr("class") + " is clicked"); }); 

या,

 $("div#target").on("click", "span.green", function() { alert($(this).attr("class") + " is clicked"); }); 

शायद कोई इस बिंदु को स्पष्ट करने के लिए एक अलग उदाहरण का उल्लेख कर सकता है? धन्यवाद।

वेब के समाधान से एकत्रित समाधान "प्रत्यक्ष बनाम नियुक्त – jQuery .on ()"

केस 1 (प्रत्यक्ष):

 $("div#target span.green").on("click", function() {...}); 

== अरे! मैं चाहता हूं कि प्रत्येक span.green अंदर div # लक्ष्य को सुनने के लिए: जब आप क्लिक करते हैं, तो एक्स करो

केस 2 (प्रत्यायोजित):

 $("div#target").on("click", "span.green", function() {...}); 

== अरे, div # लक्ष्य! जब आपके बच्चे के कोई भी तत्व जो "span.green" क्लिक करते हैं, उनके साथ एक्स करें।

दूसरे शब्दों में…

1 मामले में, प्रत्येक स्पैन को व्यक्तिगत रूप से निर्देश दिए गए हैं यदि नए स्पैन बनाए जाते हैं, तो वे निर्देश नहीं सुनाएंगे और क्लिकों पर प्रतिक्रिया नहीं देंगे प्रत्येक अवधि सीधे अपने स्वयं के घटनाओं के लिए जिम्मेदार है

2 मामले में, केवल कंटेनर को निर्देश दिया गया है; यह अपने मूल तत्वों की ओर से क्लिकों को देखने के लिए ज़िम्मेदार है घटनाओं को पकड़ने का काम सौंप दिया गया है। इसका यह भी अर्थ है कि भविष्य में बच्चे के तत्वों के लिए निर्देश जारी किए जाएंगे।

पहला रास्ता, $("div#target span.green").on() , एक क्लिक हैंडलर को स्पैन () पर सीधे जोड़ता है जो उस समय चयनकर्ता से मेल खाता है जो कोड निष्पादित होता है। इसका मतलब यह है कि यदि अन्य स्पैन बाद में जोड़े जाते हैं (या उनकी कक्षा बदलकर मैच में बदल जाती है) तो वे चूक गए हैं और एक क्लिक हैंडलर नहीं होगा इसका भी अर्थ है कि यदि आप बाद में किसी एक स्पैन के "हरी" वर्ग को निकालते हैं तो उसके क्लिक हेन्डलर को चलाना जारी रहेगा – jQuery का ट्रैक नहीं रखता कि हेन्डलर को कैसे सौंपा गया था और यह देखने के लिए कि क्या चयनकर्ता अभी भी मैच करता है

दूसरा रास्ता, $("div#target").on() , एक क्लिक हेन्डलर को उस डिव () से मेल कर देता है जो मैच (फिर से, यह उन क्षणों से मेल खाता है), लेकिन जब एक क्लिक कहीं में होता है डिव हैडलर फ़ंक्शन केवल तब ही चलाया जाएगा यदि क्लिक न केवल डिवी में हुई, लेकिन दूसरे पैरामीटर में चयनकर्ता से मिलान करने के लिए, .on .on() , "span.green" पर क्लिक करें। इस तरह से यह कोई फर्क नहीं पड़ता जब उन बच्चे के स्पैन बनाए गए थे, उन पर क्लिक करने से अब भी हेन्डलर चलाने होंगे

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

N3dst4 की व्याख्या सही है इसके आधार पर, हम यह मान सकते हैं कि सभी बच्चे तत्व शरीर के भीतर हैं, इसलिए हमें केवल इसका उपयोग करने की आवश्यकता है:

 $('body').on('click', '.element', function(){ alert('It works!') }); 

यह सीधे या प्रतिनिधि घटना के साथ काम करता है।

मैंने सीधी घटनाओं की तुलना के साथ पोस्ट को प्रस्तुत किया और प्रतिनिधि मैं शुद्ध जेएस की तुलना करता हूं, लेकिन इसका अर्थ jquery के लिए है जिसका अर्थ केवल इसे समापित करता है।

निष्कर्ष यह है कि प्रत्यायोजित ईवेंट हैंडलिंग डायनामिक DOM संरचना के लिए है, जहां बाइंड किए गए तत्वों को बनाया जा सकता है, जब उपयोगकर्ता पृष्ठ के साथ सहभागिता करता है (फिर से कोई बाइंडिंग की ज़रूरत नहीं), और प्रत्यक्ष इवेंट हैंडलिंग स्थिर DOM तत्वों के लिए है, जब हम जानते हैं कि संरचना नहीं बदलेगी।

अधिक जानकारी और पूर्ण तुलना के लिए – http://maciejsikora.com/standard-events-vs-event-delegation/

हमेशा प्रत्यायित हैंडलर का उपयोग करना, जो मैं देख रहा हूं वर्तमान में बहुत ही ट्रेंडी सही तरीके से नहीं है, कई प्रोग्रामर इसका इस्तेमाल करते हैं क्योंकि "इसे इस्तेमाल किया जाना चाहिए", लेकिन सच्चाई यह है कि सीधी घटना संचालकों को कुछ स्थिति और पसंद के लिए बेहतर होता है जो विधि का उपयोग द्वारा समर्थित होना चाहिए मतभेदों का ज्ञान

ओपी के लिए स्पर्शरेखा, लेकिन इस अवधारणा से मुझे इस सुविधा के साथ भ्रम को उजागर करने में मदद मिली है कि बाध्य तत्वों को चयनित तत्वों के माता-पिता होना चाहिए

  • बाउंड का मतलब है।
  • चयनित का दूसरा तर्क है .on()

डेलिगेशन बाध्य तत्वों के उपसमुच्चय का चयन करने के लिए। चयनकर्ता केवल सख्त बाल तत्वों पर लागू होता है

 $("span.green").on("click", ... 

से बहुत अलग है

 $("span").on("click", ".green", ... 

विशेष रूप से, @ एन 3 डीएसटी 4 के फायदे हासिल करने के लिए "भविष्य में बनाए गए तत्वों" के साथ बाध्य तत्व एक स्थायी माता-पिता होना चाहिए। तब चयनित बच्चे आकर जा सकते हैं

संपादित करें

क्यों सौंपी गई की जांचसूची। काम नहीं करता

पेचीदा कारणों से $('.bound').on('event', '.selected', some_function) काम नहीं कर सकता है:

  1. बाउंड एलिमेंट स्थायी नहीं है इसे कॉल करने के बाद बनाया गया था। पर .on()
  2. चयनित तत्व बाध्य तत्व का उचित बच्चा नहीं है। यह एक ही तत्व है
  3. चयनित तत्व किसी घटना को बुला .stopPropagation() रोका जा सकता है। .stopPropagation()

(कम जटिल कारणों को छोड़कर, जैसे कि गलत वर्तनी वाले चयनकर्ता।)