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

जब कोई उपकरण कोई ईवेंट बनाता है, तो प्रोग्राम उसे सुन सकता है, यह जानने के लिए कि विशिष्ट व्यवहार कब करना है। इस ट्यूटोरियल में, आप सीखेंगे कि जावास्क्रिप्ट का उपयोग करके घटनाओं को कैसे सुनना है।

घटना-संचालित प्रोग्रामिंग क्या है?

इवेंट-संचालित प्रोग्रामिंग एक प्रतिमान का नाम है जो अपने कार्यों को करने के लिए किसी ईवेंट के निष्पादन पर निर्भर करता है। किसी भी उच्च-स्तरीय प्रोग्रामिंग भाषा में ईवेंट-संचालित प्रोग्राम बनाना संभव है। लेकिन इवेंट-संचालित प्रोग्रामिंग जावास्क्रिप्ट जैसी भाषाओं में सबसे आम है जो यूजर इंटरफेस के साथ एकीकृत होती है।

एक घटना श्रोता क्या है?

एक घटना श्रोता एक ऐसा कार्य है जो एक विशिष्ट घटना होने पर पूर्वनिर्धारित प्रक्रिया शुरू करता है। तो, एक घटना श्रोता एक क्रिया के लिए "सुनता है", फिर एक फ़ंक्शन को कॉल करता है जो संबंधित कार्य करता है। यह घटना कई रूपों में से एक ले सकती है। सामान्य उदाहरणों में माउस इवेंट, कीबोर्ड इवेंट और विंडो इवेंट शामिल हैं।

जावास्क्रिप्ट का उपयोग करके एक ईवेंट श्रोता बनाना

आप किसी पर भी कार्यक्रम सुन सकते हैं डोम में तत्व. जावास्क्रिप्ट में एक है एडवेन्ट लिस्टनर () फ़ंक्शन जिसे आप वेब पेज पर किसी भी तत्व पर कॉल कर सकते हैं। एडवेन्ट लिस्टनर () फ़ंक्शन की एक विधि है घटना लक्ष्य इंटरफेस। घटनाओं का समर्थन करने वाली सभी वस्तुएं इस इंटरफ़ेस को लागू करती हैं। इसमें पृष्ठ पर विंडो, दस्तावेज़ और अलग-अलग तत्व शामिल हैं।

AddEventListener () फ़ंक्शन में निम्नलिखित मूल संरचना है:

element.addEventListener ("ईवेंट", functionToExecute);

कहां:

• तत्त्व किसी भी HTML टैग का प्रतिनिधित्व कर सकता है (एक बटन से एक पैराग्राफ तक)
• "प्रतिस्पर्धा" एक विशिष्ट, मान्यता प्राप्त क्रिया का नामकरण करने वाली एक स्ट्रिंग है
• कार्य करने के लिए निष्पादित करें मौजूदा फ़ंक्शन का संदर्भ है

आइए निम्नलिखित वेब पेज बनाएं जिसमें कुछ HTML तत्व हों:

स्वागत


 नमस्कार, मेरी वेबसाइट पर आपका स्वागत है।


और अधिक जानें





उपयोगकर्ता जानकारी

उपयोगकर्ता नाम: 

प्रस्तुत करना

ऊपर दिया गया HTML कोड एक साधारण पृष्ठ बनाता है जो एक जावास्क्रिप्ट फ़ाइल से लिंक होता है जिसे कहा जाता है app.js. app.js फ़ाइल में ईवेंट श्रोताओं को सेट करने के लिए कोड होगा। इसलिए, यदि आप एक विशिष्ट प्रक्रिया शुरू करना चाहते हैं, जब भी कोई उपयोगकर्ता वेब पेज पर पहले बटन पर क्लिक करता है, तो इसे बनाने के लिए यह फ़ाइल है।

app.js फ़ाइल

document.querySelector('.btn').addEventListener("click", clickDemo)
फ़ंक्शन क्लिक डेमो () {
 कंसोल.लॉग ("हाय वहाँ")
}

ऊपर दिया गया जावास्क्रिप्ट कोड का उपयोग करके पृष्ठ पर पहले बटन तक पहुंचता है क्वेरी चयनकर्ता () समारोह। यह तब इस तत्व का उपयोग करके एक ईवेंट श्रोता जोड़ता है एडवेन्ट लिस्टनर () तरीका। यह जिस विशिष्ट घटना के लिए सुनता है उसका नाम "क्लिक" है। जब बटन उस घटना को सक्रिय करता है, तो श्रोता कॉल करेगा क्लिक डेमो () समारोह।

सम्बंधित: जानें कि डोम चयनकर्ताओं का उपयोग कैसे करें

क्लिक डेमो () फ़ंक्शन ब्राउज़र कंसोल पर "हाय वहाँ" प्रिंट करता है। हर बार जब आप बटन पर क्लिक करते हैं, तो आपको यह आउटपुट अपने कंसोल में देखना चाहिए।

"क्लिक" इवेंट आउटपुट

माउस इवेंट क्या हैं?

जावास्क्रिप्ट में एक है माउसइवेंट इंटरफ़ेस जो उन घटनाओं का प्रतिनिधित्व करता है जो उपयोगकर्ता के अपने माउस के साथ बातचीत के कारण होती हैं। कई घटनाएं का उपयोग करती हैं माउसइवेंट इंटरफेस। इन घटनाओं में निम्नलिखित शामिल हैं:

• क्लिक
• डब्लक्लिक
• माउसमूव
• ऊपर टहलना
• माउसआउट
• माउसअप
• माउस नीचे

क्लिक घटना तब होती है जब कोई उपयोगकर्ता माउस बटन दबाता है और छोड़ता है, जबकि उसका पॉइंटर किसी तत्व के ऊपर होता है। पिछले उदाहरण में ठीक ऐसा ही हुआ था। जैसा कि आप ऊपर दी गई सूची से देख सकते हैं, माउस ईवेंट कई रूप ले सकते हैं।

एक अन्य सामान्य माउस घटना है डब्लक्लिक, जो डबल-क्लिक के लिए खड़ा है। यह तब सक्रिय होता है जब कोई उपयोगकर्ता माउस बटन को दो बार त्वरित उत्तराधिकार में क्लिक करता है। के बारे में एक उल्लेखनीय बात एडवेन्ट लिस्टनर () फ़ंक्शन यह है कि आप इसका उपयोग एकाधिक ईवेंट श्रोताओं को एक तत्व में असाइन करने के लिए कर सकते हैं।

पहले बटन में एक dblclick ईवेंट जोड़ना

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
समारोह dblclickDemo(){
 चेतावनी ("यह एक डबल-क्लिक ईवेंट बनाने का एक प्रदर्शन है")
}

ऊपर दिए गए कोड को app.js फ़ाइल में जोड़ने से वेब पेज पर पहले बटन के लिए प्रभावी रूप से दूसरा ईवेंट श्रोता बन जाएगा। तो, पहले बटन को दो बार क्लिक करने से ब्राउज़र में निम्नलिखित अलर्ट बन जाएगा:

ऊपर की छवि में आपको उत्पन्न होने वाला अलर्ट दिखाई देगा, और आप यह भी देखेंगे कि कंसोल में दो और "नमस्ते" आउटपुट हैं। ऐसा इसलिए है क्योंकि एक डबल-क्लिक ईवेंट दो क्लिक ईवेंट का संयोजन होता है और दोनों के लिए ईवेंट श्रोता होते हैं क्लिक और यह डब्लक्लिक आयोजन।

सूची में अन्य माउस घटनाओं के नाम उनके व्यवहार का वर्णन करते हैं। माउसमूव घटना तब होती है जब कोई उपयोगकर्ता अपने माउस को ले जाता है जब कर्सर किसी तत्व के ऊपर होता है। माउसअप घटना तब होती है जब कोई उपयोगकर्ता किसी तत्व पर एक बटन दबाता है, फिर उसे छोड़ देता है।

कीबोर्ड इवेंट क्या हैं?

जावास्क्रिप्ट में एक है कीबोर्डइवेंट इंटरफेस। यह उपयोगकर्ता और उनके कीबोर्ड के बीच बातचीत को सुनता है। पिछले, कीबोर्डइवेंट तीन प्रकार की घटनाएँ थीं। हालांकि, जावास्क्रिप्ट ने तब से पदावनत कर दिया है बटन दबाओ प्रतिस्पर्धा।

ऐसा तनाव के स्थिति में तथा चाबी नीचे ईवेंट केवल दो अनुशंसित कीबोर्ड ईवेंट हैं, जिनकी आपको आवश्यकता है। चाबी नीचे घटना तब होती है जब कोई उपयोगकर्ता किसी कुंजी को दबाता है, और तनाव के स्थिति में घटना तब होती है जब कोई उपयोगकर्ता इसे जारी करता है।

ऊपर दिए गए HTML उदाहरण पर दोबारा गौर करते हुए, कीबोर्ड ईवेंट श्रोता जोड़ने के लिए सबसे अच्छी जगह पर है इनपुट तत्व।

app.js फ़ाइल में कीबोर्ड इवेंट श्रोता जोड़ना

अभिवादन करने दें = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", CaptureInput)
फ़ंक्शन कैप्चर इनपुट (ई) {
 ग्रीटिंग्स.इनरटेक्स्ट = (`नमस्कार ${e.target.value}, मेरी वेबसाइट पर आपका स्वागत है।`)
}

उपरोक्त कोड का उपयोग करता है क्वेरी चयनकर्ता () पैराग्राफ तक पहुँचने के लिए कार्य और इनपुट पृष्ठ पर तत्व। यह तब कॉल करता है एडवेन्ट लिस्टनर () पर विधि इनपुट तत्व, जो के लिए सुनता है तनाव के स्थिति में प्रतिस्पर्धा। जब भी तनाव के स्थिति में घटना होती है, कैप्चरइनपुट () फ़ंक्शन मुख्य मान लेता है और इसे पृष्ठ पर अनुच्छेद में जोड़ता है। इ पैरामीटर उस घटना का प्रतिनिधित्व करता है, जिसे जावास्क्रिप्ट स्वचालित रूप से असाइन करता है। इस घटना वस्तु में एक संपत्ति, लक्ष्य है, जो उस तत्व का संदर्भ है जिसके साथ उपयोगकर्ता ने बातचीत की।

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

पैराग्राफ में अब इनपुट वैल्यू है, जो ऊपर के उदाहरण में "जेन डो" है।

addEventListener सभी प्रकार के उपयोगकर्ता इंटरैक्शन को कैप्चर करता है

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

AddEventListener हालाँकि, इसके तीसरे पैरामीटर के माध्यम से अतिरिक्त क्षमता प्रदान करता है। आप इसका उपयोग घटना प्रसार को नियंत्रित करने के लिए कर सकते हैं: वह क्रम जिसमें घटनाएँ तत्वों से उनके माता-पिता या बच्चों तक जाती हैं।

जावास्क्रिप्ट में घटना प्रसार को समझना

ईवेंट एक शक्तिशाली जावास्क्रिप्ट विशेषता है। यह समझना कि एक वेब ब्राउज़र उन्हें तत्वों के खिलाफ कैसे उठाता है, उनके उपयोग में महारत हासिल करने की कुंजी है।

आगे पढ़िए

लेखक के बारे में