JQuery का उपयोग करने के लिए उन बड़ी वजहों में से एक है हैंडलिंग इवेंट। कैसे करें कुछ क्रॉस ब्राउजर अंतर हैं, जो कुछ बेहतरीन प्रथाओं को लागू करते हुए, jQuery एक साधारण एपीआई में सामान्य करता है।
आवश्यक रूप से एक तरीका है जिसे आपको जानना चाहिए: .on()- यह इस तरह से काम करता है:
$("button").on("click", function() ( // do something ));यहां हम .on()विधि को केवल दो पैरामीटर दे रहे हैं । ईवेंट का नाम ("क्लिक") और उस ईवेंट में किसी भी तत्व के होने पर चलने वाला फ़ंक्शन। बहुत सफाई से पढ़ता है, है ना?
कुछ पिछले jQuery के अनुभव वाले लोग अन्य बाध्यकारी तरीकों से परिचित हो सकते हैं .bind(), जैसे .live(), या .delegate()। अब उन लोगों के बारे में चिंता न करें, आधुनिक jQuery ने उन सभी को जोड़ दिया है .on()जिसमें हमेशा सबसे अच्छा अभ्यास होता है।
जब हम ऊपर किए गए किसी इवेंट को बाइंड करते हैं, तो आप फ़ंक्शन में एक पैरामीटर नाम शामिल कर सकते हैं (और यह आमतौर पर स्मार्ट है)। वह पैरामीटर फंक्शन के अंदर "इवेंट ऑब्जेक्ट" होगा:
$("button").on("click", function(event) ( // event => "the event object" ));उस इवेंट ऑब्जेक्ट के माध्यम से आपको बहुत सारी जानकारी मिलती है। आप पहले से ही इसके बारे में थोड़ा परिचित हैं क्योंकि हमने इसका उपयोग किया है .preventDefault()और .stopPropagation()। लेकिन उस वस्तु में बहुत सारी अन्य सीधी जानकारी भी होती है। यह किस प्रकार की घटना थी जैसी चीजें (यदि कई घटनाएं इस एक ही कार्य को आग लगाती हैं), जब ऐसा हुआ, जहां यह हुआ (निर्देशांक, यदि लागू हो), तो यह किस तत्व पर हुआ, और भी बहुत कुछ। कोडिंग करते समय यह नियमित रूप से ईवेंट ऑब्जेक्ट का निरीक्षण करने के लायक है।
इवेंट डेलिगेशन की एक अवधारणा है जो घटनाओं के साथ काम करने में बेहद महत्वपूर्ण है। यह एक बहुत ही स्मार्ट आधुनिक दिन का सबसे अच्छा अभ्यास है। यह गुंजाइश के विचार को शामिल करता है।
ईवेंट बाइंडिंग के बारे में सोचने का एक पारंपरिक तरीका है "पेज पर सभी बटन ढूंढें, और उन पर एक क्लिक ईवेंट बांधें।" यह काम करता है, लेकिन यह है:
- बहुत कुशल नहीं है
- नाज़ुक
कुशल नहीं है क्योंकि आप तुरंत जावास्क्रिप्ट को उन सभी बटन तत्वों को खोजने के लिए मजबूर कर रहे हैं, जब प्रतिनिधिमंडल के साथ, आप बस एक आसान-ढूंढने वाला तत्व ढूंढ सकते हैं।
फ्रैजाइल क्योंकि अगर अधिक बटन पेज में जुड़ जाते हैं, तो वे पहले ही बाइंडिंग पर नाव से चूक गए हैं और उन्हें फिर से बाध्य होना पड़ेगा।
ईवेंट प्रतिनिधिमंडल के साथ, आप उस ईवेंट पर क्लिक करने वाले तत्व को बांधेंगे जो उन सभी की युक्तियों की तुलना में डोम ट्री से अधिक होता है। एक हो सकता है कहीं न कहीं, हो सकता है documentअपने आप में। जब आप क्लिक इवेंट को उस उच्च-अप तत्व में बाँधते हैं, तो आप उसे बताते हैं कि आप अभी भी केवल उन क्लिकों में रुचि रखते हैं जो बटनों पर हुए थे। फिर जब एक बटन क्लिक किया जाता है, तो इवेंट बबलिंग की प्रकृति के माध्यम से, वह क्लिक अंततः उच्च-अप तत्व पर ट्रिगर होगा। लेकिन ईवेंट ऑब्जेक्ट को यह पता चल जाएगा कि मूल बटन एक बटन पर हुआ है या नहीं, और आपने उस ईवेंट पर आग लगाने के लिए जो फ़ंक्शन निर्धारित किया है, वह या तो उस जानकारी को जानने के लिए फायर करेगा या नहीं।
इस पेंचकस में, हम इस तरह प्रदर्शित करते हैं:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));अब कल्पना करता है, तो हम एक और जोड़ा कि करने के लिए । हमें किसी भी ईवेंट को फिर से बाँधने की आवश्यकता नहीं है, क्योंकि ईवेंट अभी भी ख़ुशी के दायरे में बँधा हुआ है और ईवेंट्स अभी भी नए जोड़े गए टेक्स्टारिया से बबल बनाएंगे। यह विशेष रूप से वेब एप्लिकेशन वातावरणों में उपयोगी है जहाँ आप नियमित रूप से पृष्ठ में नए तत्व जोड़ रहे हैं।
JQuery इवेंट बाइंडिंग के बारे में जानने के लिए एक और अच्छी बात यह है कि वे परस्पर अनन्य नहीं हैं। यदि आप एक अन्य क्लिक हैंडलर को ठीक उसी तत्व में जोड़ते हैं जो पहले से ही एक है, तो यह सिर्फ एक और जोड़ देगा। आप पिछले एक को अधिलेखित नहीं कर रहे हैं। jQuery सिर्फ आपके लिए यह काफी इनायत से संभालता है। यदि आप वास्तव में पहले से बाध्य फ़ंक्शन को ओवरराइड करना चाहते हैं, तो आप हमेशा उन्हें अनबाइंड कर सकते हैं।
यदि यह एक ही सटीक घटना है, तो यह जानने के लायक है कि उनमें से एक विशिष्ट को अनबाइंड करने के लिए और दूसरे को नहीं, आपको घटनाओं को नाम स्थान देना होगा। घटना नाम में एक डॉट का उपयोग करके ऐसा होता है, जैसे click.namespace।
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), जैसा कि हमने पहले उल्लेख नहीं किया है, यह है कि आप घटनाओं को कैसे खोलते हैं।
बहुत सारे संभव DOM इवेंट हैं। क्लिक बड़ा मुख्य स्पष्ट है, लेकिन डबल क्लिकिंग, माउसेंटर और मसेलवेव, कीडडाउन और कीप है, जो विशिष्ट हैं जैसे कि ब्लर और चेंज, और टन अधिक। यदि आप पूरी सूची में रुचि रखते हैं, तो आप इस तरह से एक प्राप्त कर सकते हैं।
आप एक ही समय में कई घटनाओं को इस तरह से बांध सकते हैं:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));कुछ परिस्थितियाँ ऐसी होती हैं, जहाँ आप किसी घटना के होने की प्रतीक्षा कर रहे होते हैं, लेकिन एक बार ऐसा हो जाने के बाद, आपको इसकी कोई परवाह नहीं होती है या स्पष्ट रूप से उस फ़ंक्शन को आग नहीं देना चाहते हैं जिसे आपने कभी बाध्य किया था। यही .one()फ़ंक्शन के बारे में है। उसके लिए एक मानक उपयोग मामला एक फॉर्म सबमिट बटन है (यदि आप अजाक्स या जो भी संभाल रहे हैं)। आप संभावित रूप से उस सबमिट बटन को अक्षम करना चाहते हैं, जब तक कि वे इसे दबाए नहीं रखते हैं जब तक आप उस जानकारी को संसाधित नहीं कर सकते हैं और उन्हें उचित प्रतिक्रिया दे सकते हैं। यह पाठ्यक्रम का एकमात्र उपयोग मामला नहीं है, लेकिन बस इसे ध्यान में रखें। .one()== सिर्फ एक बार।