jQuery के साथ चयनकर्ता जैसे .on() में देशी addEventListener

Question

क्या किसी को पता है कि कैसे jQuery की .on() विधि मूल जेएस में लागू की जा सकती है? "AddEventListener" विधि फ़िल्टर करने के तरीके के रूप में एक बच्चे/चयनकर्ता तत्व नहीं लेती है, और मुझे नहीं लगता कि मेरे पास उचित बुलबुला/कैप्चरिंग ज्ञान है जो पूरी तरह से समझने के लिए है कि वहां क्या हो रहा है। मैंने event.js में स्रोत से परामर्श किया, जहां ऐसा प्रतीत होता है कि अंततः addEventListener का उपयोग सामान्य रूप से किया जाता है, लेकिन मुझे यकीन नहीं है कि मैं स्रोत को काफी हद तक ग्रोक करता हूं।

यदि मूल विधि बुलबुले और कैप्चरिंग का लाभ लेने के लिए एक तंत्र प्रदान नहीं करती है, तो क्या jQuery .on() फ़ंक्शन वास्तव में कोई लाभ भी प्राप्त करता है, या क्या यह इसे इस तरह से दिखता है? मैं धारणा है कि

.on('parent', '.child', fn(){}); 

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

क्या माता-पिता पर घटनाओं को लागू करने के लिए एक मानक पद्धति है जो प्रत्येक बच्चे को एक घटना संलग्न करने के बजाए अपने बच्चों के तत्वों के लिए चरणों को बुलबुला/कैप्चर करने का लाभ उठाती है?

Answer 1

देशी रूप घटना प्रतिनिधिमंडल निष्पादित करने के लिए:

parent.addEventListener('click', function(e) { 
    if(e.target.classList.contains('myclass')) { 
     // this code will be executed only when elements with class 
     // 'myclass' are clicked on 
    } 
}); 

दक्षता की बात कर रहे हैं कि आप कितने ईवेंट हैंडलर्स जोड़ने से कोई लेना देना नहीं है। 100 पंक्तियों वाली एक तालिका की कल्पना करो। तालिका तत्व में एक इवेंट हैंडलर संलग्न करने के लिए यह अधिक कुशल है, फिर प्रत्येक पंक्ति में 100 ईवेंट हैंडलर संलग्न करने की तुलना में प्रत्येक पंक्ति में 'प्रतिनिधि' करें।

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

बबलिंग/कैप्चरिंग एक संबंधित मुद्दा है, लेकिन यदि आपको कई ईवेंट हैंडलर मामलों को फायर करने का आदेश केवल इसके बारे में चिंता करने की आवश्यकता है। यदि आप बुलबुले बनाम कैप्चरिंग को समझने में रुचि रखते हैं तो मैं event order पर और पढ़ने की अनुशंसा करता हूं।

घटना प्रतिनिधिमंडल का सबसे आम लाभ यह है कि यह ईवेंट हैंडलर संलग्न होने के बाद डीओएम में जोड़े गए नए तत्वों को संभालता है। क्लिक हैंडलर के साथ 100 पंक्तियों की एक तालिका का उपरोक्त उदाहरण लें। यदि हम प्रत्यक्ष ईवेंट हैंडलर अटैचमेंट (100 ईवेंट हैंडलर) का उपयोग करते हैं, तो जोड़े गए नए पंक्तियों को मैन्युअल रूप से जोड़े गए ईवेंट हैंडलर की आवश्यकता होगी। यदि हम प्रतिनिधि कार्यक्रमों का उपयोग करते हैं, तो नई पंक्तियों को स्वचालित रूप से ईवेंट हैंडलर 'होगा', क्योंकि यह तकनीकी रूप से माता-पिता में जोड़ा गया है जो सभी भविष्य की घटनाओं को उठाएगा। What is DOM Event Delegation पढ़ें, क्योंकि अधिक जानकारी के लिए फ़ेलिक्स क्लिंग ने सुझाव दिया था।