जावास्क्रिप्ट घटनाएँ:एक घटना बनाने के तीन तरीके

किसी वेबसाइट में इंटरैक्टिव सुविधाओं को जोड़ना वह जगह है जहां जावास्क्रिप्ट चमकता है। जबकि HTML और CSS का उपयोग क्रमशः वेब पेज की संरचना और शैलियों को सेट करने के लिए किया जाता है, आप अपनी साइट को अधिक गतिशील बनाने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

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

JavaScript ईवेंट क्या है?

ईवेंट या तो ब्राउज़र या उपयोगकर्ता द्वारा ट्रिगर किए जा सकते हैं और वेब पेज की स्थिति को संशोधित करने में सक्षम हैं। जब आप किसी वेब पेज पर एक बटन पर क्लिक करते हैं, तो एक जावास्क्रिप्ट घटना बन जाती है। जब आप विस्तृत होने वाले ड्रॉपडाउन मेनू पर क्लिक करते हैं, तो एक JavaScript ईवेंट का उपयोग किया जाता है।

JavaScript ईवेंट के उपयोग की एक विस्तृत श्रृंखला है, जिसमें शामिल हैं:

जांचना कि कोई फॉर्म भरा गया है या नहीं
किसी उपयोगकर्ता द्वारा फ़ॉर्म भरने के बाद दूसरे पृष्ठ पर नेविगेट करना
ड्रॉपडाउन मेनू को इंटरैक्टिव बनाना
उपयोगकर्ता को छवियों को ज़ूम इन और आउट करने की अनुमति देना

जावास्क्रिप्ट में ईवेंट के साथ काम करने के लिए, आपको दो अवधारणाओं के बारे में जानना होगा:ईवेंट हैंडलर और ईवेंट श्रोता।

ईवेंट हैंडलर एक ऐसा फ़ंक्शन है जो किसी वेब पेज पर किसी ईवेंट के ट्रिगर होने पर चलाया जाता है। ईवेंट श्रोता किसी ईवेंट फ़ंक्शन को HTML तत्व से कनेक्ट करते हैं, इसलिए जब उस फ़ंक्शन को निष्पादित किया जाता है, तो वेब तत्व बदल जाता है।

इवेंट हैंडलर को तीन तरीकों में से एक में परिभाषित किया जा सकता है:इनलाइन इवेंट हैंडलर, इवेंट प्रॉपर्टी या इवेंट श्रोता का उपयोग करना।

इनलाइन इवेंट हैंडलर

जावास्क्रिप्ट में ईवेंट के साथ आरंभ करने का सबसे आसान तरीका इनलाइन ईवेंट हैंडलर का उपयोग करना है। इसका मतलब है कि आप अपने ईवेंट को अपनी HTML फ़ाइल में परिभाषित करेंगे।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

इस उदाहरण के लिए, मान लीजिए कि हम जे जे स्मिथ की बेकरी नामक एक बेकरी के लिए एक वेबसाइट डिजाइन कर रहे हैं। हम चाहते हैं कि उपयोगकर्ता को "प्राप्त प्रतिक्रिया" पाठ के साथ संकेत दिया जाए। जब वे फॉर्म जमा करते हैं।

निम्नलिखित कोड पर विचार करें:

<!DOCTYPE html>
<html>
	<head>
		<title>JJ Smith's Bakery</title>
	</head>

	<script src="main.js"></script>

	<body>
		<p id="submitted"></p>
		<button onclick="submitForm()">Submit form</button>
	</body>
</html>

यह कोड एक वेब पेज प्रस्तुत करता है जो इस तरह दिखता है:

जावास्क्रिप्ट घटनाएँ:एक घटना बनाने के तीन तरीके

अभी तक, बहुत कुछ नहीं चल रहा है। हमारे वेब पेज में एक बटन होता है जो हमारे बटन पर क्लिक करने पर कुछ करना चाहिए। जब हम अपने बटन पर क्लिक करते हैं, कुछ नहीं होता है। ऐसा इसलिए है क्योंकि हमने अभी तक अपना ईवेंट हैंडलर नहीं लिखा है।

फ़ाइल main.js में, निम्न कोड पेस्ट करें:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

यह कोड "सबमिट" आईडी के साथ तत्व ढूंढेगा, और इसकी सामग्री को "फॉर्म सबमिट" करने के लिए संशोधित करेगा। यह कोड तभी चलेगा जब हमारा submitForm() समारोह कहा जाता है। यह तब होगा जब उपयोगकर्ता हमारे बटन पर क्लिक करेगा।

जब हम अपने बटन पर क्लिक करते हैं, तो निम्न होता है:

जैसा कि आप देख सकते हैं, हमारा संकेत प्रकट होता है। हमने अपने वेब पेज को इंटरैक्टिव बनाने के लिए इनलाइन इवेंट हैंडलर का इस्तेमाल किया है। लेकिन इनलाइन ईवेंट हैंडलर जावास्क्रिप्ट में ईवेंट का उपयोग करने का एकमात्र तरीका नहीं हैं। आइए चर्चा करें कि हमारे कोड में ईवेंट हैंडलर प्रॉपर्टी का उपयोग कैसे करें।

हैंडलर प्रॉपर्टी वाले इवेंट

इनलाइन हैंडलर में, आपको यह निर्दिष्ट करना होगा कि आप अपनी HTML फ़ाइल में कौन सा फ़ंक्शन निष्पादित करना चाहते हैं। पहले से हमारे HTML कोड में, यह लाइन वह जगह है जहां हमने उस फ़ंक्शन को परिभाषित किया था जिसे हम कॉल करना चाहते थे जब हमारा बटन दबाया गया था:

<button onclick="submitForm()">Submit form</button>

हैंडलर गुणों का उपयोग करके, हम अपने कोड से "ऑनक्लिक" ईवेंट को हटा सकते हैं। यह हमें सभी जावास्क्रिप्ट को स्थानांतरित करने की अनुमति देता है जो हमारे वेब पेज को अपनी फाइल में इंटरैक्टिव बनाता है। इस उदाहरण के लिए, हम अपने बटन को आईडी "बटन" असाइन करने जा रहे हैं, ताकि हम अपने जावास्क्रिप्ट कोड में अपने बटन की पहचान कर सकें। आइए ऑनक्लिक ईवेंट को हटा दें और हमारे बटन को एक आईडी असाइन करें:

<button id="button">Submit form</button>

जब हमारा बटन दबाया जाता है तो हमारे ईवेंट को सक्रिय करने के लिए, हम अपनी "main.js" फ़ाइल के अंदर एक हैंडलर प्रॉपर्टी के साथ एक ईवेंट लिखने जा रहे हैं। यहां वह कोड है जिसका हम उपयोग करेंगे:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

जब आप इस कोड को चलाते हैं और बटन पर क्लिक करते हैं, तो निम्नलिखित वापस आ जाता है:

हमारा बटन पहले की तरह ही काम करता है, लेकिन हमारा कोड अलग तरीके से लिखा जाता है। अपने ईवेंट हैंडलर्स को इनलाइन लिखने के बजाय, हमने उन्हें अपनी main.js फ़ाइल में स्थानांतरित कर दिया। यह हमें अधिक रखरखाव योग्य कोड लिखने में मदद करता है क्योंकि हमें यह पता लगाने के लिए हमारे सभी HTML कोड को पढ़ने की आवश्यकता नहीं है कि हमारे इनलाइन ईवेंट कहां ट्रिगर हुए हैं।

ईवेंट श्रोता

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

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

इस उदाहरण के लिए हमारा HTML कोड ऊपर जैसा ही है, लेकिन हम अपनी "main.js" फ़ाइल में एक छोटा सा बदलाव करने जा रहे हैं:

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

इस कोड में, हम addEventListener . का उपयोग कर रहे हैं एक घटना श्रोता बनाने के लिए। यह हमारे submitForm() . को बाध्य करने के बजाय है जावास्क्रिप्ट एक ऑनक्लिक घटना के लिए कार्य करता है जैसा कि हमने अपने पिछले दो उदाहरणों में किया था।

जब हमारा बटन माउस पॉइंटर से क्लिक किया जाता है, तो सुनने के लिए हम अपना कोड बताने के लिए "क्लिक" निर्दिष्ट करते हैं। क्लिक ईवेंट के अलावा अन्य ईवेंट प्रकार भी हैं—जैसे कि कीबोर्ड ईवेंट—लेकिन हम इस ट्यूटोरियल में माउस क्लिक ईवेंट पर ध्यान केंद्रित करेंगे।

आइए अपना कोड फिर से चलाएं और हमारे बटन पर क्लिक करें।

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

निष्कर्ष

JavaScript ईवेंट आपको अपने वेब पेज को इंटरैक्टिव बनाने की अनुमति देते हैं। जब आप कोई बटन दबाते हैं, फ़ॉर्म सबमिट करते हैं, या किसी टेक्स्ट पर होवर करते हैं, तो ईवेंट ट्रिगर हो सकता है। जावास्क्रिप्ट में किसी ईवेंट को घोषित करने के तीन तरीके हैं:इनलाइन, किसी प्रॉपर्टी का उपयोग करना, या श्रोता का उपयोग करना।

अब आप एक पेशेवर वेब डेवलपर की तरह JavaScript में ईवेंट बनाना शुरू करने के लिए तैयार हैं!