jQuery के घटनाक्रम अंदर से बाहर

लेख Mail.ru Technopark के छात्रों के बीच प्रतियोगिता के भाग के रूप में लिखा गया था।

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

JQuery के साथ इवेंट हैंडलिंग

इसके बाद, jQuery से हमारा मतलब है jQuery 1.10.2, 1.0 शाखा से वर्तमान संस्करण।
जब हम jQuery का उपयोग करते हैं, तो हम सुरक्षित रूप से addEventListener और संलग्नक और बहुत अधिक के बीच के अंतर के बारे में भूल सकते हैं, क्योंकि पुस्तकालय डेवलपर के लिए निम्नलिखित प्रदान करता है:

• घटना संचालकों को पंजीकृत करने के लिए एकीकृत विधि (विधियों का उपयोग करके);
• एक तत्व पर एक ही घटना के हैंडलर की असीमित संख्या;
• हैंडलर को एक सामान्यीकृत ईवेंट ऑब्जेक्ट पास करना।

तो, jQuery में कई तरीके हैं जिनसे आप ईवेंट प्रोसेसिंग की सदस्यता ले सकते हैं:

• बाइंड - सीधे तत्व (ओं) पर एक हैंडलर स्थापित करता है। यह घटना का नाम लेता है और तर्कों के रूप में कॉलबैक करता है;
• क्लिक , ब्लर , स्क्रॉल और कई अन्य शॉर्टकट तरीके बाइंडिंग कॉलिंग के समान हैं, केवल घटना का प्रकार ही विधि का नाम है;
• ऑन - मुख्य विधि, आपको हैंडलर को सीधे तत्व से बांधने, और घटनाओं के प्रसंस्करण को सौंपने की अनुमति देता है; प्रतिनिधिमंडल के लिए, आपको एक वैकल्पिक चयनकर्ता पैरामीटर पास करना होगा;
• प्रतिनिधि - तर्क के संशोधित सेट के साथ विधि के लिए उपनाम;
• एक विधि के रूप में ही है, लेकिन हैंडलर केवल पहली बार घटना घटित होने पर काम करेगा।

घटना से अनसब्सक्राइब करने के तीन तरीके हैं: unbind (बाइंड, क्लिक और लाइक के लिए ), undelegate और off ।
लेकिन ...

jQuery addEventListener और संलग्नक से हमारे लिए न केवल एक अमूर्त परत है, और न केवल एक ईवेंट ऑब्जेक्ट को सामान्य करता है।
JQuery के हुड के तहत कोड की एक व्यापक परत है, जिसमें शामिल हैं:

• ऑब्ज़र्वर डिज़ाइन पैटर्न जो इवेंट हैंडलर के केंद्रीकृत स्थापना / हटाने के तर्क को लागू करता है;
• इवेंट ऑब्जेक्ट के लिए हुक और पैरामीटर फ़िल्टरिंग सिस्टम;
• विशेष ईवेंट API का उपयोग करके jQuery.event की कार्यक्षमता का विस्तार करने की संभावना।

पहले बातें पहले।

jQuery.event

पहले से ही बहुत से लोगों को पता था कि अंदर से jQuery कैसे काम करता है (उदाहरण के लिए, यहाँ ), लेकिन किसी कारणवश इवेंट प्रोसेसिंग तंत्र को दरकिनार कर दिया गया। तो चलिए इस गैप को भरते हैं।
पुस्तकालय उपयोगकर्ता के दृष्टिकोण से घटना प्रसंस्करण तीन चरणों से गुजरता है:

1. ईवेंट हैंडलर सेट करना - बाइंड विधि को कॉल करना, आदि।
2. ईवेंट प्रोसेसिंग - वह सारा जादू जो पहले jQuery करता है जब तक यह सामान्यीकृत ईवेंट ऑब्जेक्ट "हमारे" हैंडलर के पास नहीं जाता;
3. ईवेंट हैंडलर को हटाना - अनबाइंड विधि को कॉल करना, आदि।

विशेष कार्यक्रम एपीआई

JQuery लाइब्रेरी ईवेंट हैंडलिंग की प्रक्रिया को प्रभावित करने की क्षमता के साथ तृतीय-पक्ष कोड प्रदान करता है। लाइब्रेरी के बाउल्स में jQuery.event.special ऑब्जेक्ट है; इसकी कुंजी उन घटनाओं के नाम हैं जिन्हें हम प्रसंस्करण में हस्तक्षेप करना चाहते हैं, और मूल्य निम्नलिखित गुणों के साथ एक वस्तु हो सकते हैं:

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

मौजूदा घटनाओं के प्रसंस्करण तंत्र में हस्तक्षेप करना और अपना स्वयं का निर्माण करना दोनों संभव है। यह है कि आप एक ऐसी आकर्षक घटना कैसे बना सकते हैं जो वास्तव में एक मानक क्लिक का जवाब देती है:

 jQuery.event.special.pushy = { bindType: "click", delegateType: "click" }; 

उपरोक्त के अतिरिक्त, अन्य संभावित गुण हैं, जिसका उद्देश्य संबंधित पृष्ठ पर पाया जा सकता है।
बाद में लेख में, यह दिखाया जाएगा कि किस क्षण jQuery के स्थानांतरण कुछ विशेष विधियों को नियंत्रित करते हैं, और घटना प्रसंस्करण के पाठ्यक्रम को प्रभावित करना वास्तव में कैसे संभव है।

हैंडलर स्थापना

आइए दिखाते हैं कि हम कोड निष्पादित कर रहे हैं

  $('div').click(function (e) { /* ... */ }); 

jQuery के साथ। आइए देखें कि प्रत्येक चरण में क्या होता है।
बाहरी हैंडलर । घटना को संसाधित करने के लिए, आपको एक हैंडलर बनाने की आवश्यकता है, इसके लिए एक लिंक प्राप्त करें और हैंडलर को सेट करने के लिए जिम्मेदार किसी भी jQuery विधि को पास करें। जिसे हमने वास्तव में fucntion (e) {/ * ... * /} का उपयोग करके एक फ़ंक्शन बनाकर किया था और क्लिक विधि को एक पैरामीटर के रूप में कॉल किया था।
बाँध, एक, प्रतिनिधि तरीके, आदि। हमारा हैंडलर इन तरीकों में से एक में मिलता है, जिसके अंदर, मापदंडों के एक अलग सेट के साथ, ऑन मेथड वास्तव में है ।
ऑन -मेथ में इफ-ब्लॉक का एक ठोस सेट होता है - मापदंडों के लिए सभी संभावित विकल्पों का प्रसंस्करण और आदेश होता है जिसके साथ इसे कहा जा सकता है। इसके अलावा, यह एक ऐसी विधि है जो एक बार ट्रिगर हैंडलर (एक विधि) को स्थापित करने के तर्क को लागू करती है। अंत में, प्रत्येक विधि को वर्तमान jQuery ऑब्जेक्ट के लिए कहा जाता है।
प्रत्येक विधि jQuery कोर का हिस्सा है, यह इस पद्धति के साथ है कि पुस्तकालय "jQuery सेट" ( यहाँ देखें) पर पुनरावृति करता है। प्रत्येक विधि प्रदान किए गए इंटरफ़ेस के आधार पर सरणियों और वस्तुओं को बायपास कर सकती है। यदि ऑब्जेक्ट लंबाई की संपत्ति प्रदान करता है, तो पुनरावृत्ति उसी तरह से होती है जैसे कि एक सरणी में होती है, जो कि माइक्रोएप्टिमाइजेशन का एक बड़ा उदाहरण है। इसलिए, jQuery सेट से प्रत्येक DOM तत्व के लिए, ऐड मेथड को कहा जाता है।
बाद की सभी प्रक्रिया ऐड मेथड (jQuery.event ऑब्जेक्ट से) में होती है। शुरुआत में, प्रत्येक बाहरी हैंडलर को एक विशिष्ट पहचानकर्ता सौंपा जाता है। JQuery में इसके लिए (और न केवल) एक वैश्विक काउंटर jQuery.guid है, जो प्रत्येक उपयोग के साथ वेतन वृद्धि करता है।
फिर एक फ़ंक्शन बनाया जाता है, जिसके बाद हम मुख्य हैंडलर को कॉल करेंगे, जो एक इवेंट ऑब्जेक्ट प्राप्त करता है और डिस्पैच विधि को कॉल करता है।
अगर इस ईवेंट के हैंडलर को पहली बार इस एलिमेंट के लिए सेट किया जाता है, तो हैंडलर की एक कतार बनाई जाती है (सभी बाहरी हैंडलर्स को इसे लिखा जाएगा) और विशेष.सेटअप को बुलाया जाता है यदि यह इस प्रकार के इवेंट के लिए सेट किया गया है।
विशेष.सेटअप के अंदर , एक डेवलपर मुख्य हैंडलर बनाने के अपने तर्क को लागू कर सकता है और addEventListener या संलग्नक कार्यों, या कुछ अन्य स्वतंत्र तर्क का उपयोग करके किसी घटना की सदस्यता ले सकता है।
इसके बाद, बनाया गया मुख्य हैंडलर ब्राउज़र के आधार पर, addEventListener या atachEvent विधियों का उपयोग करके वांछित ईवेंट के लिए सब्सक्राइब किया जाता है, लेकिन यह केवल तभी होता है जब विशेष। Setup सेट नहीं होता है या गलत रिटर्न देता है।
यदि निर्दिष्ट किया जाता है, तो नियंत्रण को विशेष। जब भी कोई हैंडलर jQuery के माध्यम से स्थापित किया जाता है, विशेष.सेटअप के विपरीत, विशेष।
और इस सब के बाद, बहुत शीर्ष पर स्थानांतरित किया गया बाहरी हैंडलर हैंडलर ( लिंक ) की कतार में गिर जाता है और जब घटना होती है तो उसे बुलाया जाएगा। इसके बारे में आगे।

इवेंट हैंडलिंग

ईवेंट होता है - एक ईवेंट DOM तत्व में होता है और लाइब्रेरी द्वारा बनाए गए मुख्य हैंडलर में गिर जाता है (यह addEventListener या संलग्नक का उपयोग करके ईवेंट को सब्सक्राइब किया जाता है), जिसमें प्रेषण विधि कहा जाता है।
प्रेषण विधि में, ईवेंट पैरामीटर को मूल गैर-सामान्यीकृत ईवेंट ऑब्जेक्ट मिलता है, जिसे सामान्यीकरण के लिए फिक्स विधि में पास किया जाता है।
फिक्स विधि के अंदर, यह जांचा जाता है कि क्या इवेंट ऑब्जेक्ट तैयार है (यदि सामान्यीकरण पहले नहीं किया गया है), और यदि नहीं, तो:

• यह देखने के लिए जांचता है कि क्या फिक्सहुक [प्रकार] हैं , जहां प्रकार उस प्रकार की घटना है जो हुई। FixHooks [प्रकार] एक ऐसी वस्तु है जिसमें दो गुण हो सकते हैं:
  • प्रॉप्स - संपत्ति के नामों की एक सरणी जिसे मूल इवेंट ऑब्जेक्ट से सामान्यीकृत करने के लिए कॉपी किया जाना चाहिए;
  • फ़िल्टर - एक फ़ंक्शन जो एक घटना के मापदंडों को सामान्य करता है (परिवर्तित करता है)।
• यदि एक निश्चित प्रकार के FixHooks हैं, तो इस ऑब्जेक्ट का उपयोग किया जाता है; यदि नहीं, तो विशेष regexp की मदद से यह जांचा जाता है कि क्या हमारा ईवेंट कुंजी-ईवेंट या माउस-ईवेंट है (इनमें से प्रत्येक का अपना फिक्सहूक है - कीहुक और माउस हूक, क्रमशः)।
• तब एक "खाली" सामान्यीकृत इवेंट ऑब्जेक्ट बनाया जाता है ( नए jQuery.Event का उपयोग करके), और सभी गुण जिनके नाम jQuery.event.props और fixHooks.props सरणियों में मौजूद हैं, को मूल ईवेंट ऑब्जेक्ट से सामान्यीकृत एक में कॉपी किया जाता है। फ़िक्स विधि के अंत में, फ़िल्टर फ़ंक्शन को कहा जाता है, अगर परिभाषित किया गया है, और सामान्यीकृत इवेंट ऑब्जेक्ट को प्रेषण के लिए वापस कर दिया गया है।

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

हैंडलर हटाएं

हैंडलर को हटाकर स्थापना से चरणों के समान चरणों के माध्यम से चला जाता है, अर्थात्: निष्कासन, शुरू करना, उदाहरण के लिए, unbind के साथ, किसी तरह बंद विधि में गिर जाता है, तो jQuery प्रत्येक का उपयोग कर सेट पर पुनरावृत्त करता है, और अंत में, ऐड विधि को नहीं बुलाया जाता है, लेकिन निकालें विधि (धन्यवाद, कैप)।
निकालें विधि (jQuery.event से) ऐड विधि के विपरीत है:

• पहचानकर्ता द्वारा प्रोसेसर की कतार में बाहरी हैंडलर की खोज। फिर बाहरी हैंडलर को कतार से हटा दिया जाता है।
• यदि कतार खाली है, तो इसे हटा दिया जाता है, साथ ही jQuery.removeEvent का उपयोग करने वाला मुख्य हैंडलर, जो बदले में, RemoveEventListener और detachEvent पर एक आवरण भी है।

आप कार्यों को निर्धारित करके एक हैंडलर को हटाने की प्रक्रिया को प्रभावित कर सकते हैं। जब भी कतार खाली हो जाती है तो फाड़ को कहा जाता है।

परिणाम

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