क्या कोई व्यक्ति jQuery बॉलिंग और jQuery/जावास्क्रिप्ट में ईवेंट कैप्चरिंग के व्यावहारिक, रोजमर्रा के उदाहरण प्रदान कर सकता है? मैं इन अवधारणाओं का प्रदर्शन करने वाले सभी प्रकार के उदाहरण देखता हूं लेकिन वे हमेशा उन चीजों की तरह लगते हैं जिन्हें आपको नियमित रूप से नियमित वेब ऐप में कभी आवश्यकता नहीं होती है।घटना बुलबुले और कैप्चरिंग के सामान्य, व्यावहारिक उपयोग के उदाहरण?
दोनों विवरण और कोड स्निपेट की सराहना की जाएगी।
प्रैक्टिकल इवेंट बबलिंग?
jQuery के साथ या बिना (ध्यान में रखते हुए कि आप लाइब्रेरी का उपयोग किये बिना बुलबुले घटनाओं को संभाल सकते हैं) ऐसे कई परिदृश्य हैं जहां आप बुलबुले का लाभ उठाने के लिए अपना कोड बनाना चाहते हैं।
एक उदाहरण: मान लीजिए कि आपके पास एक ऐसा पृष्ठ है जहां तत्व गतिशील रूप से बनाए जा रहे हैं, लेकिन आप उन तत्वों पर एक क्लिक को संसाधित करना चाहते हैं। आप अस्तित्व से पहले किसी इवेंट हैंडलर को सीधे उनके साथ बाध्य नहीं कर सकते हैं, लेकिन जब आप उन्हें बनाते हैं तो उन्हें व्यक्तिगत हैंडलर बाध्यकारी दर्द होता है। इसके बजाए, किसी इवेंट हैंडलर को एक कंटेनर ऑब्जेक्ट से बांधें: ईवेंट पर क्लिक करें अलग-अलग तत्वों से कंटेनर तक बबल हो जाएंगे लेकिन आप अभी भी बता सकते हैं कि कौन सा तत्व क्लिक किया गया था - jQuery .on(), या .delegate() के उपयुक्त वाक्यविन्यास का उपयोग कर रहा है, तो यह आसान बनाता है (या यहां तक कि .live() यदि आपके पास jQuery का वास्तव में पुराना संस्करण है) क्योंकि यह क्लिक किए गए तत्व पर this सेट करता है।
<div id="someContainer"></div>
$("#someContainer").on("click", ".dynamicElement", function() {
// this is the element, do something with it
});
यह कहना है कि वर्ग "dynamicElement" है कि "someContainer" का एक बच्चा है के साथ एक तत्व के क्लिक पर कुछ करना div। यह पेज लोड पर "गतिशील एलिमेंट" तत्व मौजूद था, इस पर ध्यान दिए बिना, कुछ अन्य उपयोगकर्ता कार्रवाई के जवाब में बाद में जोड़ा गया था, या शायद अजाक्स के साथ लोड किया गया था।
मैं छवियों को गतिशील रूप से एक div में जोड़ता हूं, मैं युक्त div में ऑनलोड ईवेंट को कैप्चर करने के लिए ईवेंट बबलिंग का उपयोग करने की योजना बना रहा हूं।
'ऑनलोड' यह जानना है कि छवि वास्तव में स्क्रीन पर कब प्रदान की गई थी? क्या आप एक कोड स्निपेट प्रदान कर सकते हैं? –
यह सही है, इसे प्रस्तुत किया गया है, इसलिए आप छवि को दिखाने के लिए प्रदर्शन = 'इनलाइन' सेट कर सकते हैं। छवि को डाउनलोड करने से पहले उपयोगकर्ता क्या देखता है यह सामान्य करेगा (ब्राउज़र लोगों द्वारा छोटी प्यारी छवियों के बजाय)। क्षमा करें अभी तक कोई स्निपेट नहीं है। –
- @ pure_code, क्या आप समझा सकते हैं कि आपका उदाहरण घटना बुलबुले के रूप में योग्य क्यों है? मैं आपके उत्तर को ऊपर उठाना चाहता हूं लेकिन यह सुनिश्चित करना चाहता हूं कि भविष्य में आगंतुकों के लिए यह पर्याप्त रूप से उपयोगी हो। –
धन्यवाद nnnnnn, मैं नियमित रूप से आपके द्वारा उल्लेख किए गए विशेष उदाहरण का उपयोग कर रहा हूं। मैं सोच रहा हूं कि क्या आप अन्य लोगों को भी साझा कर सकते हैं? धन्यवाद! –
.... मुझे लगता है कि यह एक और श्रोता बनाम पंजीकरण करने के लिए भी अधिक कुशल है। –