JavaScript Events - Complete Tutorial in Hindi | वेब डेवलपमेंट गाइड

JavaScript Events

इस ट्यूटोरियल में हम JavaScript events के बारे में सब कुछ सीखेंगे - बेसिक्स से लेकर एडवांस्ड कॉन्सेप्ट्स तक। यह गाइड beginners और experienced developers दोनों के लिए उपयोगी है।

JavaScript Events क्या हैं? (What are JavaScript Events?)

JavaScript में events उस समय होते हैं जब user या browser page के साथ interact करता है। जैसे:

किसी button पर क्लिक करना
पेज का लोड होना
कीबोर्ड की कोई key दबाना
माउस को किसी element पर घुमाना
फॉर्म का submit होना

Events को handle करने के लिए हम event listeners या event handlers का उपयोग करते हैं जो event होने पर execute होते हैं।

लाइव उदाहरण:

Events के प्रकार (Types of Events)

JavaScript में कई प्रकार के events होते हैं:

1. Mouse Events (माउस इवेंट्स)

Event Name	Handler Attribute	विवरण
click	`onclick`	जब element पर क्लिक किया जाता है
dblclick	`ondblclick`	जब element पर डबल क्लिक किया जाता है
mouseover	`onmouseover`	जब mouse pointer element पर आता है
mouseout	`onmouseout`	जब mouse pointer element से बाहर जाता है
mousedown	`onmousedown`	जब mouse button दबाया जाता है
mouseup	`onmouseup`	जब mouse button छोड़ा जाता है
mousemove	`onmousemove`	जब mouse pointer move होता है
contextmenu	`oncontextmenu`	जब right-click किया जाता है

2. Keyboard Events (कीबोर्ड इवेंट्स)

Event Name	Handler Attribute	विवरण
keydown	`onkeydown`	जब कोई key दबाई जाती है
keyup	`onkeyup`	जब कोई key छोड़ी जाती है
keypress	`onkeypress`	जब कोई key दबाई और छोड़ी जाती है (deprecated)

3. Form Events (फॉर्म इवेंट्स)

Event Name	Handler Attribute	विवरण
submit	`onsubmit`	जब फॉर्म submit किया जाता है
change	`onchange`	जब input element का value बदलता है
focus	`onfocus`	जब element focus प्राप्त करता है
blur	`onblur`	जब element focus खो देता है
input	`oninput`	जब input element का value बदलता है (हर change पर)
reset	`onreset`	जब फॉर्म रीसेट किया जाता है
select	`onselect`	जब text select किया जाता है

4. Window/Document Events (विंडो/डॉक्युमेंट इवेंट्स)

Event Name	Handler Attribute	विवरण
load	`onload`	जब पेज पूरी तरह लोड हो जाता है
DOMContentLoaded	N/A	जब DOM पूरी तरह लोड हो जाता है (images से पहले)
resize	`onresize`	जब विंडो का साइज बदलता है
scroll	`onscroll`	जब पेज स्क्रॉल किया जाता है
beforeunload	`onbeforeunload`	जब पेज unload होने वाला होता है
unload	`onunload`	जब पेज unload होता है

5. Touch Events (टच इवेंट्स - मोबाइल डिवाइसेस)

Event Name	Handler Attribute	विवरण
touchstart	`ontouchstart`	स्क्रीन टच होते ही
touchmove	`ontouchmove`	टच के बाद मूवमेंट होने पर
touchend	`ontouchend`	टच खत्म होने पर
touchcancel	`ontouchcancel`	टच इंटरप्ट होने पर (जैसे कॉल आने पर)

6. Clipboard Events (क्लिपबोर्ड इवेंट्स)

Event Name	Handler Attribute	विवरण
copy	`oncopy`	जब कंटेंट कॉपी किया जाता है
cut	`oncut`	जब कंटेंट कट किया जाता है
paste	`onpaste`	जब कंटेंट पेस्ट किया जाता है

7. Media Events (मीडिया इवेंट्स - ऑडियो/वीडियो)

Event Name	Handler Attribute	विवरण
play	`onplay`	जब मीडिया प्ले शुरू होता है
pause	`onpause`	जब मीडिया पॉज होता है
ended	`onended`	जब मीडिया खत्म हो जाता है
volumechange	`onvolumechange`	जब वॉल्यूम बदलता है

Event Handlers को Add करने के तरीके

1. HTML Attribute के रूप में

<button onclick="alert('क्लिक किया!')">क्लिक करें</button>

नोट: यह तरीका अब recommended नहीं है क्योंकि यह HTML और JavaScript को mix करता है। अच्छी practice है JavaScript को अलग रखना।

2. DOM Property के रूप में

document.getElementById("myBtn").onclick = function() {
    alert("क्लिक किया!");
};

3. addEventListener() का उपयोग करके (सबसे अच्छा तरीका)

document.getElementById("myBtn").addEventListener("click", function() {
    alert("क्लिक किया!");
});

addEventListener के फायदे:

एक element पर multiple event handlers add कर सकते हैं
बेहतर control over event propagation
अधिक options जैसे once, passive आदि

Event Object

जब कोई event होता है, तो browser automatically एक event object create करता है जिसमें event से related सभी information होती है।

document.getElementById("myBtn").addEventListener("click", function(event) {
    console.log(event); // Event object देखें
    console.log(event.type); // "click"
    console.log(event.target); // जिस element पर event हुआ
    console.log(event.clientX, event.clientY); // mouse position
});

Event Object के Common Properties

Property	Description
`type`	Event का नाम (जैसे "click")
`target`	जिस element पर event हुआ
`currentTarget`	जिस element पर handler attached है
`preventDefault()`	Default action को रोकने का method
`stopPropagation()`	Event bubbling को रोकने का method

Event Propagation: Bubbling और Capturing

JavaScript में events तीन phases में propagate होते हैं:

Capturing Phase: Window से target element तक
Target Phase: Target element पर
Bubbling Phase: Target element से window तक

Bubbling उदाहरण:

<div id="parent">
    <button id="child">क्लिक करें</button>
</div>

<script>
    document.getElementById("parent").addEventListener("click", function() {
        alert("Parent clicked!");
    });
    
    document.getElementById("child").addEventListener("click", function() {
        alert("Child clicked!");
    });
</script>

जब आप button पर क्लिक करेंगे, तो पहले "Child clicked!" और फिर "Parent clicked!" alert दिखेगा।

stopPropagation()

Event bubbling को रोकने के लिए:

document.getElementById("child").addEventListener("click", function(event) {
    alert("Child clicked!");
    event.stopPropagation(); // Parent तक event नहीं पहुंचेगा
});

Event Delegation

Event delegation एक powerful pattern है जहां हम single parent element पर event listener add करके multiple child elements को handle करते हैं।

Event Delegation उदाहरण:

<ul id="itemList">
    <li>आइटम 1</li>
    <li>आइटम 2</li>
    <li>आइटम 3</li>
</ul>

<script>
    document.getElementById("itemList").addEventListener("click", function(event) {
        if(event.target.tagName === 'LI') {
            alert(event.target.textContent + ' पर क्लिक किया');
        }
    });
</script>

इस तरह हम प्रत्येक li element पर अलग से event listener add करने की बजाय सिर्फ parent ul पर एक listener add कर सकते हैं।

Custom Events

आप अपने खुद के custom events भी create और dispatch कर सकते हैं:

// Custom event create करना
let myEvent = new CustomEvent("myCustomEvent", {
    detail: { message: "यह custom event है" },
    bubbles: true,
    cancelable: true
});

// Event listener add करना
document.addEventListener("myCustomEvent", function(event) {
    console.log(event.detail.message);
});

// Event dispatch करना
document.dispatchEvent(myEvent);

Performance Tips

Event Delegation का उपयोग करें: Similar elements के लिए multiple event listeners की बजाय एक parent element पर listener add करें
Unnecessary events से बचें: जैसे scroll या mousemove जैसे events जो बार-बार trigger होते हैं
Event listeners को remove करें: जब element की जरूरत न हो तो removeEventListener() का उपयोग करें

Passive events: Scroll performance improve करने के लिए:

document.addEventListener('scroll', function() {
    // कोड
}, { passive: true });

Practical Examples

1. Form Validation

<form id="myForm">
    <input type="text" id="username" placeholder="यूजरनेम" required>
    <button type="submit">सबमिट करें</button>
</form>

<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        let username = document.getElementById("username").value;
        
        if(username.length < 4) {
            alert("यूजरनेम 4 अक्षरों से लंबा होना चाहिए");
            event.preventDefault(); // Form submit रोकें
        }
    });
</script>

2. Keyboard Shortcuts

document.addEventListener("keydown", function(event) {
    if(event.ctrlKey && event.key === "s") {
        event.preventDefault();
        alert("कंटेंट सेव किया गया!");
        // Save functionality यहां implement करें
    }
});

Event.preventDefault() vs Event.stopPropagation()

Method	उद्देश्य	उदाहरण
`preventDefault()`	ब्राउज़र के डिफॉल्ट बिहेवियर को रोकता है	फॉर्म सबमिट रोकना, लिंक पर क्लिक रोकना
`stopPropagation()`	इवेंट बबलिंग/कैप्चरिंग को रोकता है	चाइल्ड इवेंट पेरेंट तक नहीं पहुंचेगा

प्रैक्टिकल डिफरेंस:

// केवल डिफॉल्ट एक्शन रोकेगा
link.addEventListener('click', (e) => {
    e.preventDefault(); // लिंक ओपन नहीं होगा
    console.log("Link clicked but not opened");
});

// इवेंट प्रोपेगेशन रोकेगा
button.addEventListener('click', (e) => {
    e.stopPropagation(); // पेरेंट तक इवेंट नहीं जाएगा
    console.log("Button clicked but parent won't know");
});

Touch Events (मोबाइल डिवाइसेस के लिए)

इवेंट	विवरण
`touchstart`	स्क्रीन टच होते ही
`touchmove`	टच के बाद मूवमेंट होने पर
`touchend`	टच खत्म होने पर
`touchcancel`	टच इंटरप्ट होने पर (जैसे कॉल आने पर)

महत्वपूर्ण: मोबाइल डिवाइसेस पर हमेशा touch और click दोनों इवेंट्स हैंडल करें। Pointer Events API का उपयोग करना और भी बेहतर विकल्प है।

Pointer Events API (आधुनिक तरीका)

// सभी इनपुट डिवाइसेस (माउस, टच, पेन) के लिए
element.addEventListener('pointerdown', (e) => {
    console.log(`Pointer type: ${e.pointerType}`); // "mouse", "touch", "pen"
});

इवेंट थ्रॉटलिंग और डिबाउंसिंग

टेक्निक	उद्देश्य	उपयोग
थ्रॉटलिंग	इवेंट को निश्चित अंतराल पर ही एक्ज़ीक्यूट करना	स्क्रॉल, रेसाइज इवेंट्स
डिबाउंसिंग	इवेंट के रुकने के बाद ही एक्ज़ीक्यूट करना	सर्च इनपुट, बटन प्रेस

इम्प्लीमेंटेशन:

// थ्रॉटलिंग उदाहरण (हर 100ms में अधिकतम 1 बार)
function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        if (!lastRan) {
            func.apply(this, arguments);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(() => {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(this, arguments);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

window.addEventListener('scroll', throttle(function() {
    console.log('Scrolling...');
}, 100));

इवेंट लूप (Event Loop) और Async इवेंट्स

JavaScript का इवेंट लूप कैसे काम करता है:

console.log("Start");

// यह callback इवेंट लूप द्वारा बाद में एक्ज़ीक्यूट होगा
setTimeout(() => console.log("Timeout"), 0);

// यह माइक्रोटास्क क्यू में जाएगा
Promise.resolve().then(() => console.log("Promise"));

console.log("End");

/* आउटपुट:
Start
End
Promise
Timeout
*/

इवेंट कैप्चरिंग फेज

इवेंट कैप्चरिंग का उपयोग करने के लिए:

// तीसरा पैरामीटर true करने पर कैप्चरिंग फेज में ही इवेंट हैंडल होगा
document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent captured');
}, true);

MutationObserver (DOM परिवर्तनों को ट्रैक करना)

// DOM में बदलाव का पता लगाने के लिए
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        console.log('DOM changed!', mutation);
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true
});

इवेंट कीम्प्ट (Keyboard Event Codes)

प्रॉपर्टी	विवरण
`event.key`	वास्तविक की वैल्यू ("a", "Enter", "ArrowUp")
`event.code`	फिजिकल की पोजीशन ("KeyA", "Enter", "ArrowUp")
`event.ctrlKey`	Ctrl की दबी हुई है या नहीं

कीबोर्ड शॉर्टकट उदाहरण:

document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log('Save command triggered');
    }
});

इवेंट बबलिंग के प्रैक्टिकल उपयोग

// डायनामिकली ऐड किए गए एलिमेंट्स के लिए
document.querySelector('.container').addEventListener('click', (e) => {
    if (e.target.classList.contains('delete-btn')) {
        e.target.parentElement.remove();
    }
});

इवेंट लिस्नर्स को हटाना

function handleClick() {
    console.log('Clicked once, then removed');
    btn.removeEventListener('click', handleClick);
}

const btn = document.getElementById('myBtn');
btn.addEventListener('click', handleClick);

Conclusion

इस गाइड में हमने JavaScript events के बारे में सब कुछ सीखा:

Events क्या हैं और उनके प्रकार
Event handlers add करने के विभिन्न तरीके
Event object और उसकी properties/methods
Event propagation (bubbling और capturing)
Event delegation pattern
Custom events
Performance optimization techniques

अभ्यास के लिए: एक To-Do List एप्लिकेशन बनाएं जहां आप add, delete और mark as complete जैसी functionality events का उपयोग करके implement करें।

JavaScript Events - Complete Tutorial in Hindi | वेब डेवलपमेंट गाइड

JavaScript Events