जावास्क्रिप्ट घटना श्रोता

| | | | |

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

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

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

  • फ़ॉर्म भरने के बाद उपयोगकर्ता को दूसरे पेज पर ले जाना
  • ड्रॉप-डाउन मेनू को इंटरैक्टिव बनाएं
  • उपयोगकर्ता को ऐसा करने दें छवियों पर ज़ूम इन और आउट करें
  • जावास्क्रिप्ट में ईवेंट के साथ काम करने के लिए, आपको दो अवधारणाओं को जानना होगा: ईवेंट हैंडलर और ईवेंट श्रोता।

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

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

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

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

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

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

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

     YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe

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

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

    यह कोड "सबमिट" आईडी के साथ तत्व ढूंढेगा और इसकी सामग्री को "फॉर्म सबमिट" में बदल देगा। बुलाया। यह तब होता है जब उपयोगकर्ता हमारे बटन पर क्लिक करता है।

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

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

    हैंडलर गुणों वाले ईवेंट

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

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

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

    जब आप दौड़ते हैं यह कोड और बटन पर क्लिक करने पर, निम्न संदेश वापस आ जाता है:

    एक

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

    ईवेंट श्रोता

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

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

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

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

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

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

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

    निष्कर्ष

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

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

    Shop

    Learn programming in R: courses

    $

    Best Python online courses for 2022

    $

    Best laptop for Fortnite

    $

    Best laptop for Excel

    $

    Best laptop for Solidworks

    $

    Best laptop for Roblox

    $

    Best computer for crypto mining

    $

    Best laptop for Sims 4

    $

    Latest questions

    NUMPYNUMPY

    psycopg2: insert multiple rows with one query

    12 answers

    NUMPYNUMPY

    How to convert Nonetype to int or string?

    12 answers

    NUMPYNUMPY

    How to specify multiple return types using type-hints

    12 answers

    NUMPYNUMPY

    Javascript Error: IPython is not defined in JupyterLab

    12 answers

    News


    Wiki

    Python OpenCV | cv2.putText () method

    numpy.arctan2 () in Python

    Python | os.path.realpath () method

    Python OpenCV | cv2.circle () method

    Python OpenCV cv2.cvtColor () method

    Python - Move item to the end of the list

    time.perf_counter () function in Python

    Check if one list is a subset of another in Python

    Python os.path.join () method