JavaScript में Events यूजर इंटरैक्शन को हैंडल करने का तरीका है, जो DOM के साथ मिलकर पेज को इंटरैक्टिव बनाता है। यह ब्लॉग Event Listeners (click, input, mouseover, keydown), Event Objects, Prevent Default, Event Delegation Basics, Exercise (क्लिक पर काउंटर बढ़ाना), Quiz (5 MCQs), और Mini Project (फॉर्म वैलिडेटर) को सरल हिंदी में समझाता है। टेक्निकल टर्म्स (जैसे event, listener, propagation) English में हैं, और कोड पूरी तरह English में है।

What is Events in JavaScript in Hindi (JavaScript में इवेंट्स क्या होते हैं)

Events ब्राउज़र या यूजर द्वारा ट्रिगर होते हैं, जैसे क्लिक या कीप्रेस। Event propagation (bubbling और capturing) event flow को कंट्रोल करता है। बेस्ट प्रैक्टिस: event delegation यूज़ करें। उपयोग: इंटरैक्टिव UI, यूजर फीडबैक।

Example:

document.addEventListener("click", () => console.log("Clicked!"));

Event Listeners:

Event Listeners elements पर events को हैंडल करते हैं। addEventListener से listener जोड़ा जाता है। बेस्ट प्रैक्टिस: removeEventListener से memory leaks रोकें।

Example:

const btn = document.getElementById("btn");
btn.addEventListener("click", () => console.log("Button clicked"));
btn.addEventListener("mouseover", () => console.log("Mouse over"));
btn.addEventListener("keydown", (e) => console.log(e.key));
btn.addEventListener("input", (e) => console.log(e.target.value));

Types of Event listeners in JavaScript in Hindi (JavaScript में इवेंट लिस्नर्स के प्रकार)

यहाँ नीचे हमने JavaScript के कुछ इवेंट लिस्टनर्स को सरल तरीके से समझाया है:

Click Event:

Click event तब ट्रिगर होता है जब यूजर किसी element पर क्लिक करता है। उपयोग: बटन क्लिक, UI इंटरैक्शन।

Example:

const btn = document.getElementById("btn");
btn.addEventListener("click", () => console.log("Button clicked"));

Input Event:

Input event तब ट्रिगर होता है जब यूजर input फील्ड में टेक्स्ट डालता या बदलता है। उपयोग: फॉर्म डेटा, लाइव सर्च।

Example:

const input = document.getElementById("myInput");
input.addEventListener("input", (e) => console.log(e.target.value));

Mouseover Event:

Mouseover event तब ट्रिगर होता है जब माउस पॉइंटर element पर आता है। उपयोग: टूलटिप्स, मेन्यू हाइलाइट।

Example:

const box = document.getElementById("box");
box.addEventListener("mouseover", () => console.log("Mouse over"));

Keydown Event:

Keydown event तब ट्रिगर होता है जब यूजर कीबोर्ड की कोई की दबाता है। उपयोग: कीबोर्ड शॉर्टकट्स, गेम कंट्रोल्स।

Example:

document.addEventListener("keydown", (e) => console.log(e.key))

Event Objects:

Event Objects event details (जैसे target, type, key) प्रदान करते हैं। यह event flow में ऑटोमैटिकली पास होता है।

Example:

document.addEventListener("click", (e) => {
console.log(e.target); // Clicked element
console.log(e.type); // "click"
});

Prevent Default:

Prevent Default default actions (जैसे लिंक क्लिक पर पेज लोड या फॉर्म सबमिट) को रोकता है। यह e.preventDefault() के ज़रिए काम करता है।

Example:

const link = document.querySelector("a");
link.addEventListener("click", (e) => {
e.preventDefault();
console.log("Default prevented");
});

Event Delegation Basics:

Event Delegation parent element पर listener लगाकर child elements के events हैंडल करता है। यह Bubbling पर आधारित है।

Example:

const list = document.getElementById("list");
list.addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
console.log("LI clicked: " + e.target.textContent);
}
});

Exercise: Increase the counter on click

Task: बटन क्लिक पर काउंटर बढ़ाने वाला प्रोग्राम बनाएँ।

Code:

let count = 0;
const btn = document.getElementById("counterBtn");
const display = document.getElementById("display");
btn.addEventListener("click", () => {
count++;
display.textContent = count;
});

Quiz: Event Types

1. What is the usage of document.addEventListener("click", () => {});?

   • A) Handles click event
   • B) Prevents page load
   • C) Error
   • D) Does nothing
   • Answer: A) Handles click event

2. What is the effect of e.preventDefault();?

   • A) Prevents default behavior
   • B) Stops event
   • C) Error
   • D) undefined
   • Answer: A) Prevents default behavior

3. What is the output of btn.addEventListener("mouseover", () => {});?

   • A) Triggers on mouse hover
   • B) Triggers on click
   • C) Error
   • D) Does nothing
   • Answer: A) Triggers on mouse hover

Mini Project: Simple Form Validator

Task: इनपुट खाली होने पर एरर मैसेज दिखाने वाला फॉर्म वैलिडेटर बनाएँ।

Code:

const form = document.getElementById("myForm");
const input = document.getElementById("myInput");
const error = document.getElementById("error");

form.addEventListener("submit", (e) => {
if (input.value.trim() === "") {
e.preventDefault();
error.textContent = "Input is empty";
} else {
error.textContent = "";
}
});

Conclusion

Events JavaScript में यूजर इंटरैक्शन को हैंडल करने का शक्तिशाली तरीका है। अगले मॉड्यूल में Async JavaScript सीखें।

Also Read:

• Learn Arrays in JavaScript in Hindi
• Learn Control Structures in JavaScript in Hindi
• Functions in JavaScript: A Beginner’s Hindi Tutorial
• JavaScript Operators: Easy Guide for Beginners