jQuery Event Methods in Hindi

jQuery Event Methods का use तब किया जाता है जब user किसी HTML element के साथ कोई interaction करता है, जैसे button पर click करना, mouse को किसी element के ऊपर ले जाना, input field में typing करना, form submit करना या dropdown से option select करना। jQuery इन user interactions को detect करके उनके response में कोई action perform करने की सुविधा देता है।

उदाहरण के लिए, अगर किसी button पर user click करता है और हमें उस click के बाद कोई message दिखाना है, तो jQuery के click() event method का use किया जा सकता है।

$("#btn").click(function() {
  alert("Button clicked!");
});

यहाँ #btn button को select करता है और click() उस button के click event को handle करता है।

jQuery Event का Basic Concept

Event को simple language में किसी user action या browser activity के रूप में समझ सकते हैं। जैसे:

• Button पर click करना
• Element पर double-click करना
• Mouse को element के ऊपर ले जाना
• Input field में cursor ले जाना
• Keyboard से key दबाना
• Form submit करना
• Dropdown से option बदलना

जब कोई event होता है, तब हम एक event handler function चला सकते हैं। यही function तय करता है कि event होने के बाद क्या action perform होगा।

jQuery Event Method का Basic Syntax

किसी event को handle करने का सामान्य तरीका इस प्रकार है:

$(selector).eventMethod(function() {
  // Event होने पर चलने वाला code
});

उदाहरण:

$("#btn").click(function() {
  alert("Hello!");
});

इसमें $("#btn") button को select करता है, click() click event को handle करता है और function के अंदर लिखा code click होने पर execute होता है।

1. click()

click() jQuery का सबसे commonly used event method है। जब user किसी selected element पर click करता है, तब इसके अंदर दिया गया function execute होता है।

इसका use buttons, links, cards और दूसरे clickable elements के साथ किया जा सकता है।

$("#btn").click(function() {
  alert("Button clicked!");
});

2. dblclick()

dblclick() event तब trigger होता है जब user किसी element पर जल्दी-जल्दी दो बार click करता है। इसे double-click interaction handle करने के लिए use किया जाता है।

$("#box").dblclick(function() {
  $(this).hide();
});

ऊपर के example में user जब box पर double-click करेगा, तो $(this) उसी box को represent करेगा और hide() उसे छिपा देगा।

3. mouseenter() और mouseleave()

mouseenter() तब execute होता है जब mouse pointer किसी selected element के अंदर enter करता है। इसके opposite में mouseleave() तब execute होता है जब mouse pointer उस element से बाहर चला जाता है।

इनका use hover-based effects, highlighting और interactive UI बनाने में किया जा सकता है।

$("#box").mouseenter(function() {
  $(this).css("background-color", "yellow");
});

$("#box").mouseleave(function() {
  $(this).css("background-color", "white");
});

4. hover()

hover() mouse के element के ऊपर आने और element से बाहर जाने दोनों situations को handle करने के लिए convenient method है। इसमें दो functions दिए जा सकते हैं:

• पहला function mouse enter होने पर चलता है।
• दूसरा function mouse leave होने पर चलता है।

$("#text").hover(
  function() {
    // Mouse enter
  },
  function() {
    // Mouse leave
  }
);

यह internally mouseenter() और mouseleave() जैसी behavior को handle करने के लिए convenient syntax देता है।

5. focus() और blur()

focus() तब trigger होता है जब किसी input या form field को focus मिलता है। उदाहरण के लिए user input box पर click करता है या keyboard navigation से उस field पर आता है।

blur() इसके opposite में तब trigger होता है जब selected field अपना focus खो देता है।

इन methods का use input fields को highlight करने, validation और user experience improve करने में किया जा सकता है।

$("input").focus(function() {
  $(this).css("background-color", "lightgreen");
});

$("input").blur(function() {
  $(this).css("background-color", "white");
});

6. keydown(), keyup() और keypress()

इन event methods का relation keyboard interaction से है। जब user keyboard से key press करता है, तब keyboard-related events trigger हो सकते हैं।

keydown()

keydown() तब trigger होता है जब keyboard की key दबाई जाती है।

keyup()

keyup() तब trigger होता है जब दबाई गई key को छोड़ा जाता है।

keypress()

keypress() पुराने jQuery code में keyboard event के रूप में मिलता है, लेकिन modern web development में इसे नए code के लिए generally avoid करना बेहतर है। Keyboard handling के लिए keydown() और keyup() ज्यादा appropriate options हैं।

$("#typeBox").keydown(function() {
  $("#msg").text("Key pressed...");
});

$("#typeBox").keyup(function() {
  $("#msg").text("Key released!");
});

7. submit()

submit() method form के submit event को handle करने के लिए use किया जाता है। जब user form को submit करता है, तब इसके अंदर दिया गया function execute हो सकता है।

Practical websites में इसका use form validation, data processing या submit होने से पहले user को message दिखाने के लिए किया जा सकता है।

अगर केवल demonstration करना हो और page reload रोकना हो, तो event के अंदर event.preventDefault() use किया जा सकता है।

8. change()

change() event तब trigger होता है जब किसी form element की value change होती है और browser उस change को register करता है। यह विशेष रूप से select, checkbox और input fields के साथ useful है।

Dropdown के साथ इसका use करने का एक simple example:

$("select").change(function() {
  alert("You selected: " + $(this).val());
});

9. on()

on() jQuery का एक flexible और powerful event handling method है। इसका use एक या multiple events को handle करने के लिए किया जा सकता है।

Basic syntax:

$(selector).on("event", function() {
  // Event code
});

उदाहरण:

$("#box").on("click", function() {
  $(this).css("background", "orange");
});

यहाँ on("click", ...) click event को attach कर रहा है।

एक ही element पर multiple events भी handle किए जा सकते हैं:

$("#box").on("mouseenter mouseleave", function() {
  $(this).css("background", "orange");
});

on() खासकर dynamic elements के साथ भी useful होता है, क्योंकि event delegation की मदद से बाद में add किए गए elements के events को handle किया जा सकता है।

Event Handler में this का Use

jQuery event handler के अंदर this उस HTML element को refer करता है जिस पर event हुआ है। jQuery में इसे अक्सर $(this) के रूप में use किया जाता है।

$(".box").click(function() {
  $(this).css("background", "yellow");
});

अगर page पर कई .box elements हैं, तो जिस box पर click होगा, उसी box पर यह action apply होगा। इससे हर element के लिए अलग-अलग ID बनाने की जरूरत नहीं पड़ती।

jQuery Events में Event Object

jQuery event handler function में event object भी प्राप्त किया जा सकता है। इसमें event से जुड़ी useful information मौजूद हो सकती है।

$("#btn").click(function(event) {
  console.log(event.type);
});

यहाँ event.type से event का type पता किया जा सकता है, जैसे click। Form submit जैसे events में event object का use preventDefault() के लिए भी किया जाता है।

Common jQuery Event Methods

Method	Use
click()	Single click handle करता है।
dblclick()	Double click handle करता है।
mouseenter()	Mouse element में enter होने पर trigger होता है।
mouseleave()	Mouse element से बाहर जाने पर trigger होता है।
hover()	Mouse enter और leave behavior को conveniently handle करता है।
focus()	Element को focus मिलने पर trigger होता है।
blur()	Element focus खोने पर trigger होता है।
keydown()	Keyboard key दबाने पर trigger होता है।
keyup()	Keyboard key छोड़ने पर trigger होता है।
submit()	Form submit event handle करता है।
change()	Form control की value change होने पर trigger होता है।
on()	Flexible तरीके से events attach करता है।

Direct Event Methods और on() में अंतर

jQuery में कुछ events को directly उनके method से attach किया जा सकता है:

$("#btn").click(function() {
  alert("Clicked");
});

वहीं इसी काम को on() से भी किया जा सकता है:

$("#btn").on("click", function() {
  alert("Clicked");
});

Simple situations में दोनों approaches काम कर सकती हैं। लेकिन on() ज्यादा flexible है और event delegation तथा multiple events जैसे use cases में useful होता है।

jQuery Event Methods के Practical Uses

• Button click पर कोई action perform करना।
• Mouse hover पर element को highlight करना।
• Form fields को focus होने पर style करना।
• Keyboard input को detect करना।
• Form submission को validate करना।
• Dropdown selection के अनुसार content बदलना।
• Interactive menus और buttons बनाना।
• Dynamic web pages में user interaction handle करना।

Important Points

• jQuery event methods user interactions को handle करने के लिए use होते हैं।
• click() सबसे common mouse event methods में से एक है।
• mouseenter() और mouseleave() mouse movement को handle करते हैं।
• focus() और blur() form fields के focus state से जुड़े हैं।
• keydown() और keyup() keyboard interaction के लिए useful हैं।
• keypress() legacy code में मिल सकता है, लेकिन नए code में keyboard handling के लिए keydown() या keyup() को prefer करना बेहतर है।
• submit() form submission को handle करता है।
• change() form control की value change होने पर useful है।
• on() flexible event handling के लिए important method है।
• Event handler के अंदर $(this) current event वाले element को target करने में useful है।
• Form submit को रोकने के लिए event object के साथ preventDefault() use किया जा सकता है।

Conclusion

jQuery Event Methods web pages को interactive बनाने में important role निभाते हैं। इनके द्वारा हम user के click, double-click, mouse movement, keyboard input, form submission और value changes जैसे interactions को detect करके उसके अनुसार action perform कर सकते हैं।

click(), dblclick(), hover(), focus(), blur(), keydown(), keyup(), submit(), change() और on() जैसे methods को समझने के बाद jQuery की मदद से interactive forms, buttons, menus और dynamic UI components बनाना काफी आसान हो जाता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---