jQuery इवेंट्स का उपयोग वेब पेज पर विभिन्न इवेंट्स को हैंडल करने के लिए किया जाता है। इवेंट्स वे क्रियाएँ होती हैं जो उपयोगकर्ता की इंटरैक्शन या ब्राउज़र द्वारा उत्पन्न होती हैं, जैसे कि क्लिक करना, माउस मूवमेंट, कीबोर्ड प्रेस, फॉर्म सबमिट, आदि। jQuery इवेंट हैंडलिंग कोड को सरल और प्रभावी बनाता है, जिससे आप आसानी से विभिन्न इवेंट्स को कैप्चर और रिस्पॉन्ड कर सकते हैं।
इस अध्याय में, हम jQuery में इवेंट हैंडलिंग के विभिन्न पहलुओं को समझेंगे और जानेंगे कि कैसे आप इवेंट्स को प्रभावी ढंग से हैंडल कर सकते हैं। हम निम्नलिखित महत्वपूर्ण बिंदुओं पर चर्चा करेंगे:
- इवेंट हैंडलिंग का परिचय (Introduction to Event Handling): इवेंट हैंडलिंग के मूल सिद्धांत और इसका महत्व।
- सामान्य इवेंट्स (Common Events): जैसे कि क्लिक, डबल-क्लिक, माउस ओवर, की प्रेस, आदि।
- कस्टम इवेंट्स (Custom Events): अपने स्वयं के इवेंट्स को कैसे क्रिएट और ट्रिगर करें।
इस अध्याय के अंत तक, आप सीखेंगे कि jQuery का उपयोग करके विभिन्न इवेंट्स को कैसे हैंडल किया जा सकता है और अपने वेब पेज को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल कैसे बनाया जा सकता है। आइए, jQuery इवेंट्स की इस रोचक यात्रा को शुरू करें और इसके शक्तिशाली फीचर्स का लाभ उठाएं।
इवेंट हैंडलिंग (Event Handling)
jQuery इवेंट हैंडलिंग का उपयोग वेब पेज पर उपयोगकर्ता की विभिन्न क्रियाओं और इंटरैक्शन्स को कैप्चर और रिस्पॉन्ड करने के लिए किया जाता है। इवेंट हैंडलिंग कोड को सरल और अधिक प्रभावी बनाता है, जिससे डेवलपर्स आसानी से विभिन्न इवेंट्स को हैंडल कर सकते हैं।
इवेंट हैंडलिंग का मूल सिंटैक्स
$(सेलेक्टर).इवेंट(function(){
// इवेंट हैंडलर कोड यहाँ आएगा
});
इस सिंटैक्स में:
$(सेलेक्टर): उस HTML तत्व का चयन करता है जिस पर इवेंट को लागू करना है।इवेंट: इवेंट का प्रकार (जैसे, click, mouseover, keypress आदि)।function() { ... }: इवेंट हैंडलर फंक्शन है जो इवेंट ट्रिगर होने पर निष्पादित होता है।
उदाहरण
- क्लिक इवेंट हैंडलिंग (Handling Click Event):
<!DOCTYPE html> <html> <head> <title>Event Handling Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("#myButton").click(function(){ alert("Button clicked!"); }); }); </script> </head> <body> <button id="myButton">Click Me</button> </body> </html>इस उदाहरण में, जब उपयोगकर्ता बटन (
#myButton) पर क्लिक करता है, तब एक अलर्ट बॉक्स प्रदर्शित होता है जिसमें “Button clicked!” संदेश होता है। - माउसओवर इवेंट हैंडलिंग (Handling Mouseover Event):
<!DOCTYPE html> <html> <head> <title>Event Handling Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("#myParagraph").mouseover(function(){ $(this).css("color", "red"); }); }); </script> </head> <body> <p id="myParagraph">Hover over this paragraph.</p> </body> </html>इस उदाहरण में, जब उपयोगकर्ता पैराग्राफ (
#myParagraph) पर माउस ले जाता है, तब उसका रंग लाल हो जाता है। - कीप्रेस इवेंट हैंडलिंग (Handling Keypress Event):
<!DOCTYPE html> <html> <head> <title>Event Handling Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $(document).keypress(function(event){ alert("Key pressed: " + event.which); }); }); </script> </head> <body> <p>Press any key to see the key code.</p> </body> </html>इस उदाहरण में, जब उपयोगकर्ता कोई भी कुंजी दबाता है, तब एक अलर्ट बॉक्स में दबाई गई कुंजी का कोड प्रदर्शित होता है।
सामान्य इवेंट्स (Common Events)
jQuery में कई सामान्य इवेंट्स होते हैं जिनका उपयोग वेब पेज पर उपयोगकर्ता इंटरैक्शन को कैप्चर करने और उन पर प्रतिक्रिया देने के लिए किया जा सकता है। यहां हम कुछ प्रमुख और सामान्य इवेंट्स को देखेंगे और उनके उदाहरणों को समझेंगे।
1. क्लिक इवेंट (Click Event)
क्लिक इवेंट तब ट्रिगर होता है जब उपयोगकर्ता किसी तत्व पर क्लिक करता है।
$(document).ready(function(){
$("#myButton").click(function(){
alert("Button clicked!");
});
});
इस उदाहरण में, बटन (#myButton) पर क्लिक करने पर एक अलर्ट बॉक्स प्रदर्शित होता है।
2. डबल-क्लिक इवेंट (Double-Click Event)
डबल-क्लिक इवेंट तब ट्रिगर होता है जब उपयोगकर्ता किसी तत्व पर डबल-क्लिक करता है।
$(document).ready(function(){
$("#myParagraph").dblclick(function(){
$(this).hide();
});
});
इस उदाहरण में, पैराग्राफ (#myParagraph) पर डबल-क्लिक करने पर वह छिप जाएगा।
3. माउसओवर इवेंट (Mouseover Event)
माउसओवर इवेंट तब ट्रिगर होता है जब उपयोगकर्ता किसी तत्व पर माउस ले जाता है।
$(document).ready(function(){
$("#myParagraph").mouseover(function(){
$(this).css("color", "red");
});
});
इस उदाहरण में, पैराग्राफ (#myParagraph) पर माउस ले जाने पर उसका रंग लाल हो जाएगा।
4. माउसआउट इवेंट (Mouseout Event)
माउसआउट इवेंट तब ट्रिगर होता है जब उपयोगकर्ता किसी तत्व से माउस हटा लेता है।
$(document).ready(function(){
$("#myParagraph").mouseout(function(){
$(this).css("color", "black");
});
});
इस उदाहरण में, पैराग्राफ (#myParagraph) से माउस हटाने पर उसका रंग काला हो जाएगा।
5. कीप्रेस इवेंट (Keypress Event)
कीप्रेस इवेंट तब ट्रिगर होता है जब उपयोगकर्ता कोई भी कुंजी दबाता है।
$(document).ready(function(){
$(document).keypress(function(event){
alert("Key pressed: " + event.which);
});
});
इस उदाहरण में, कोई भी कुंजी दबाने पर एक अलर्ट बॉक्स में दबाई गई कुंजी का कोड प्रदर्शित होता है।
6. फोकस इवेंट (Focus Event)
फोकस इवेंट तब ट्रिगर होता है जब कोई इनपुट तत्व फोकस में आता है।
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
});
इस उदाहरण में, इनपुट तत्व पर फोकस होने पर उसका बैकग्राउंड रंग पीला हो जाएगा।
7. ब्लर इवेंट (Blur Event)
ब्लर इवेंट तब ट्रिगर होता है जब कोई इनपुट तत्व फोकस से बाहर जाता है।
$(document).ready(function(){
$("input").blur(function(){
$(this).css("background-color", "white");
});
});
इस उदाहरण में, इनपुट तत्व फोकस से बाहर जाने पर उसका बैकग्राउंड रंग सफेद हो जाएगा।
कस्टम इवेंट्स (Custom Events)
कभी-कभी हमें ऐसी स्थितियों का सामना करना पड़ता है जहां हमें अपने कस्टम इवेंट्स बनाने और उन्हें ट्रिगर करने की आवश्यकता होती है। jQuery कस्टम इवेंट्स को बनाने और हैंडल करने के लिए एक शक्तिशाली और सरल तरीका प्रदान करता है। कस्टम इवेंट्स आपको अपनी आवश्यकताओं के अनुसार इवेंट्स को परिभाषित और ट्रिगर करने की अनुमति देते हैं।
कस्टम इवेंट बनाने का सिंटैक्स
$(सेलेक्टर).on('कस्टम इवेंट नाम', function(){
// इवेंट हैंडलर कोड यहाँ आएगा
});
कस्टम इवेंट ट्रिगर करने का सिंटैक्स
$(सेलेक्टर).trigger('कस्टम इवेंट नाम');
उदाहरण
- कस्टम इवेंट बनाना और हैंडल करना (Creating and Handling a Custom Event):
<!DOCTYPE html>
<html>
<head>
<title>Custom Events Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// कस्टम इवेंट हैंडलर सेट करना
$("#myElement").on("myCustomEvent", function(){
alert("Custom event triggered!");
});
// कस्टम इवेंट ट्रिगर करना
$("#triggerButton").click(function(){
$("#myElement").trigger("myCustomEvent");
});
});
</script>
</head>
<body>
<div id="myElement">This is my element</div>
<button id="triggerButton">Trigger Custom Event</button>
</body>
</html>
इस उदाहरण में, एक कस्टम इवेंट myCustomEvent परिभाषित किया गया है और #myElement तत्व पर सेट किया गया है। जब #triggerButton बटन पर क्लिक किया जाता है, तब myCustomEvent ट्रिगर होता है और एक अलर्ट बॉक्स प्रदर्शित होता है जिसमें “Custom event triggered!” संदेश होता है।
- कस्टम डेटा पास करना (Passing Custom Data):
<!DOCTYPE html>
<html>
<head>
<title>Custom Events with Data Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// कस्टम इवेंट हैंडलर सेट करना जो डेटा स्वीकार करता है
$("#myElement").on("myCustomEvent", function(event, customMessage){
alert(customMessage);
});
// कस्टम इवेंट ट्रिगर करना और डेटा पास करना
$("#triggerButton").click(function(){
$("#myElement").trigger("myCustomEvent", ["Hello, this is a custom message!"]);
});
});
</script>
</head>
<body>
<div id="myElement">This is my element</div>
<button id="triggerButton">Trigger Custom Event with Data</button>
</body>
</html>
इस उदाहरण में, कस्टम इवेंट myCustomEvent ट्रिगर करते समय एक कस्टम संदेश पास किया गया है। जब #triggerButton बटन पर क्लिक किया जाता है, तब कस्टम संदेश “Hello, this is a custom message!” अलर्ट बॉक्स में प्रदर्शित होता है।
कैसे जांचें कि कोई चेकबॉक्स jQuery में चेक है? (How to Check Whether a Checkbox is Checked in jQuery?)
jQuery का उपयोग करके यह जांचना बहुत आसान है कि कोई चेकबॉक्स चेक किया गया है या नहीं। आप jQuery के is() मेथड या prop() मेथड का उपयोग करके यह चेक कर सकते हैं।
is() मेथड का उपयोग (Using the is() Method)
is() मेथड का उपयोग करके आप यह जांच सकते हैं कि चेकबॉक्स चेक किया गया है या नहीं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Check if Checkbox is Checked Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#checkButton").click(function(){
if ($("#myCheckbox").is(":checked")) {
alert("The checkbox is checked.");
} else {
alert("The checkbox is not checked.");
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="myCheckbox"> Check me!
<button id="checkButton">Check if Checkbox is Checked</button>
</body>
</html>
इस उदाहरण में, जब बटन (#checkButton) पर क्लिक किया जाता है, तो यह चेक किया जाता है कि #myCheckbox चेक किया गया है या नहीं। अगर चेकबॉक्स चेक किया गया है, तो “The checkbox is checked.” का अलर्ट प्रदर्शित होता है, अन्यथा “The checkbox is not checked.” का अलर्ट प्रदर्शित होता है।
prop() मेथड का उपयोग (Using the prop() Method)
prop() मेथड का उपयोग करके आप यह जांच सकते हैं कि चेकबॉक्स चेक किया गया है या नहीं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Check if Checkbox is Checked Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#checkButton").click(function(){
if ($("#myCheckbox").prop("checked")) {
alert("The checkbox is checked.");
} else {
alert("The checkbox is not checked.");
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="myCheckbox"> Check me!
<button id="checkButton">Check if Checkbox is Checked</button>
</body>
</html>
इस उदाहरण में, जब बटन (#checkButton) पर क्लिक किया जाता है, तो यह चेक किया जाता है कि #myCheckbox चेक किया गया है या नहीं। अगर चेकबॉक्स चेक किया गया है, तो “The checkbox is checked.” का अलर्ट प्रदर्शित होता है, अन्यथा “The checkbox is not checked.” का अलर्ट प्रदर्शित होता है।