Question. जावास्क्रिप्ट की मदद से किसी html file के button पर click event से सम्बंधित किसी फंक्शन को कैसे run किया जाता है?

जावास्क्रिप्ट की मदद से किसी HTML फाइल में बटन पर क्लिक इवेंट से संबंधित किसी फंक्शन को रन करने के लिए आप निम्नलिखित Steps का पालन कर सकते हैं:

1. HTML में बटन बनाएं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>
    <script src="script.js"></script> <!-- बाहरी जावास्क्रिप्ट फ़ाइल -->
</body>
</html>

2. जावास्क्रिप्ट में फंक्शन बनाएं

आप जावास्क्रिप्ट फाइल (script.js) में एक फंक्शन बना सकते हैं और उस फंक्शन को बटन के क्लिक इवेंट से जोड़ सकते हैं

// script.js
// फंक्शन जो क्लिक होने पर रन होगा
function myFunction() {
    alert("Button Clicked!");
}

// बटन पर क्लिक इवेंट को जोड़ें
document.getElementById("myButton").addEventListener("click", myFunction);

3. कैसे काम करता है

HTML में बटन: हमने एक बटन बनाया है जिसका ID myButton है।
जावास्क्रिप्ट में फंक्शन: हमने एक फंक्शन myFunction बनाया है, जो बटन क्लिक होने पर एक अलर्ट दिखाएगा।
इवेंट लिसनर जोड़ना: addEventListener का उपयोग करते हुए, हम बटन के लिए एक क्लिक इवेंट लिसनर जोड़ते हैं, जो myFunction को कॉल करेगा जब बटन पर क्लिक किया जाएगा।

4. पूरा उदाहरण

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        function myFunction() {
            alert("Button Clicked!");
        }

        document.getElementById("myButton").addEventListener("click", myFunction);
    </script>
</body>
</html>

5. निष्कर्ष

इस तरीके से, आप किसी HTML फाइल में बटन पर क्लिक इवेंट के माध्यम से जावास्क्रिप्ट फंक्शन को चला सकते हैं।

Other Techniques

जावास्क्रिप्ट में किसी बटन पर क्लिक इवेंट को हैंडल करने के अन्य कई तरीके हैं। यहाँ कुछ अन्य तरीके दिए गए हैं:

1. इवेंट हैंडलर का उपयोग करते हुए (HTML में)

आप सीधे HTML में onclick एट्रिब्यूट का उपयोग कर सकते हैं, जिससे बटन पर क्लिक होने पर एक फंक्शन कॉल होता है। लेकिन यह तरीका उचित नही हैं क्योंकि यदि कल आप function का नाम एक जगह भी, HTML या script file में बदल देते हैं तो कोड ब्रेक कर जाता हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <button onclick="myFunction()">Click Here!</button>

    <script>
        function myFunction() {
            alert("Button Clicked!");
        }
    </script>
</body>
</html>

2. जावास्क्रिप्ट में डायनामिकली बटन बनाना

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

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Button Click Example</title>
</head>
<body>
    <div id="buttonContainer"></div>

    <script>
        function myFunction() {
            alert("Button Clicked!");
        }

        // नया बटन बनाना
        const button = document.createElement("button");
        button.textContent = "Click Here!";
        button.addEventListener("click", myFunction);

        // बटन को HTML में जोड़ना
        document.getElementById("buttonContainer").appendChild(button);
    </script>
</body>
</html>

3. jQuery का उपयोग करते हुए

यदि आप jQuery का उपयोग कर रहे हैं, तो इवेंट हैंडलिंग करना और भी आसान हो जाता है। लेकिन इसमें आपको लाइब्रेरी पर निर्भर रहना पड़ता हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Button Click Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                alert("Button Clicked!");
            });
        });
    </script>
</body>
</html>

4. एक्सप्रेशन का उपयोग करते हुए

आप जावास्क्रिप्ट के setTimeout या setInterval के साथ भी इवेंट हैंडल कर सकते हैं। यह भी क्लीन कोड है साथ ही किसी निश्चित अंतराल के बाद एक बार या बार बार इवेंट हैंडल कर सकते हैं।

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click with Timeout Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        document.getElementById("myButton").onclick = function() {
            setTimeout(function() {
                alert("Button Clicked!");
            }, 2000); // 2 सेकंड बाद अलर्ट दिखाएँ
        };
    </script>
</body>
</html>

5. फंक्शनल प्रोग्रामिंग स्टाइल

जावास्क्रिप्ट में, आप फंक्शनल प्रोग्रामिंग के तरीके से भी इवेंट हैंडल कर सकते हैं। यहाँ आप पहले function expression को arrow function के रूप में बनाते हैं और फिर इवेंट लिसनर का यूज़ पहले की तरह करते हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Functional Style Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        const handleClick = () => alert("Button Clicked!");
        document.getElementById("myButton").addEventListener("click", handleClick);
    </script>
</body>
</html>

6. निष्कर्ष

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

Applied Knowledge

Home

Thursday, October 31, 2024

JavaScript Click event Handling in Hindi

Other Techniques

No comments:

Post a Comment

Hot Topics