जावास्क्रिप्ट में इवेंट हैंडलिंग

Articles

यह लेख जावास्क्रिप्ट में इवेंट हैंडलिंग की व्याख्या करता है।

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

जावास्क्रिप्ट में इवेंट हैंडलिंग

जावास्क्रिप्ट में इवेंट हैंडलिंग उपयोगकर्ता क्रियाओं (जैसे क्लिक और कीबोर्ड इनपुट) या ब्राउज़र क्रियाओं के प्रतिक्रियास्वरूप विशिष्ट कार्यों को निष्पादित करने की एक प्रणाली है। इवेंट लिसनर सेट करके, आप डायनामिक और इंटरऐक्टिव वेब पेज बना सकते हैं।

इवेंट्स के मूल सिद्धांत

इवेंट्स उपयोगकर्ता क्रियाओं और ब्राउज़र क्रियाओं के प्रतिक्रियास्वरूप होती हैं। जब कोई इवेंट होता है, तो संबंधित इवेंट हैंडलर (फंक्शन) निष्पादित होता है। उदाहरण के लिए, निम्नलिखित इवेंट्स होती हैं:।

क्लिक (click)
कीबोर्ड इनपुट (keydown, keyup)
माउस मूवमेंट (mousemove, mouseover)
फॉर्म सबमिशन (submit)
पेज लोड पूरा (DOMContentLoaded)
स्क्रॉल (scroll)

इवेंट लिसनर्स जोड़ना

इवेंट लिसनर्स को addEventListener() मेथड का उपयोग करके सेट किया जाता है। यह मेथड निर्दिष्ट इवेंट होने पर विशेष फंक्शन को कॉल करता है।

`addEventListener()` की बुनियादी सिंटैक्स

1element.addEventListener(event, handler);

element वह HTML तत्व है जो घटना की निगरानी करता है।
event घटना का नाम है (उदाहरण के लिए, click)।
handler वह फ़ंक्शन है जो घटना के घटित होने पर निष्पादित होता है।

इवेंट ऑब्जेक्ट

जब कोई इवेंट होता है, तो जावास्क्रिप्ट एक इवेंट ऑब्जेक्ट इवेंट की जानकारी के साथ इवेंट हैंडलर को पास करता है। यह ऑब्जेक्ट जानकारी प्रदान करता है जैसे कि किस एलिमेंट ने इवेंट को ट्रिगर किया और कौन सी कुंजी दबाई गई।

उदाहरण: इवेंट ऑब्जेक्ट का उपयोग करना

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

यह कोड इवेंट ऑब्जेक्ट का उपयोग करके बटन पर क्लिक करने पर विस्तृत जानकारी और क्लिक किए गए तत्व को कंसोल में दिखाता है।

सामान्य इवेंट्स

क्लिक इवेंट

क्लिक इवेंट तब होता है जब उपयोगकर्ता किसी एलिमेंट पर क्लिक करता है।

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

यह कोड तत्व पर क्लिक करने पर कंसोल में एक संदेश दिखाता है।

कीबोर्ड इवेंट्स

keydown और keyup इवेंट्स तब होते हैं जब उपयोगकर्ता कोई कुंजी दबाता या छोड़ता है। आप यह देखने के लिए event.key का उपयोग कर सकते हैं कि कौन सी कुंजी दबाई गई थी।

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

यह कोड उपयोगकर्ता द्वारा कुंजी दबाने पर कंसोल में कुंजी का नाम दिखाता है।

माउस इवेंट्स

mousemove और mouseover इवेंट्स माउस के मूवमेंट और होवर पर होते हैं।

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

यह कोड हर बार जब माउस हिलता है, कंसोल में स्थिति (X और Y निर्देशांक) दिखाता है।

फॉर्म इवेंट्स

फॉर्म-संबंधी इवेंट्स में submit और input शामिल हैं। submit इवेंट तब होता है जब कोई फॉर्म सबमिट किया जाता है और यह आमतौर पर पेज को रीलोड करता है, लेकिन इसे रोकने के लिए अक्सर event.preventDefault() का उपयोग किया जाता है।

उदाहरण: फॉर्म सबमिशन पर पेज रीलोड रोकना

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

यह कोड फ़ॉर्म सबमिट होने पर पृष्ठ को पुनः लोड होने से रोकता है और इसके बजाय कंसोल में एक संदेश दिखाता है।

इवेंट प्रसार (बब्बलिंग और कैप्चरिंग)

इवेंट्स दो चरणों में फैलते हैं: कैप्चरिंग चरण, जो पैरेंट एलिमेंट्स से चाइल्ड एलिमेंट्स तक जाता है, और बब्बलिंग चरण, जो चाइल्ड एलिमेंट्स से पैरेंट एलिमेंट्स तक जाता है।

इवेंट बब्बलिंग

डिफ़ॉल्ट रूप से, इवेंट्स सबसे अंदरूनी एलिमेंट पर होते हैं और बाहर की ओर फैलते हैं। इसे बब्बलिंग कहा जाता है।

उदाहरण: बब्बलिंग का उदाहरण

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

इस उदाहरण में, जब आप एक बटन क्लिक करते हैं, तो पहले बटन का इवेंट होता है, उसके बाद पैरेंट एलिमेंट का इवेंट होता है।

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

addEventListener() में तीसरा आर्ग्युमेंट true निर्दिष्ट करके, आप कैप्चरिंग चरण में इवेंट्स को संभाल सकते हैं।

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

यह कोड कैप्चरिंग चरण में पेरेंट तत्व की क्लिक घटना को संभालता है और कंसोल में एक संदेश दिखाता है।

`stopPropagation()` के साथ प्रसार को रोकना

आप event.stopPropagation() का उपयोग करके इवेंट के प्रसार को रोक सकते हैं।

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

यह कोड बटन पर क्लिक करने पर घटना के प्रसार को रोकता है और कंसोल में एक संदेश दिखाता है।

इवेंट्स हटाना

आप removeEventListener() का उपयोग करके इवेंट लिसनर्स को हटा सकते हैं। कोई इवेंट लिसनर हटाने के लिए, आपको addEventListener() में निर्दिष्ट फ़ंक्शन का संदर्भ चाहिए।

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

यह कोड बटन से क्लिक इवेंट लिस्नर को हटा देता है, ताकि क्लिक करने पर वह अब संभाला नहीं जाएगा।

कस्टम इवेंट्स

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

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

यह कोड एक कस्टम इवेंट myCustomEvent बनाता और भेजता है, तथा कंसोल में इसकी जानकारी दिखाता है।

सारांश

इवेंट हैंडलिंग वेब अनुप्रयोगों की इंटरएक्टिविटी को बढ़ाने के लिए एक आवश्यक तत्व है। इवेंट हैंडलिंग के घटकों का उपयोग करके, आप अधिक लचीला और उन्नत उपयोगकर्ता अनुभव प्रदान कर सकते हैं।

इवेंट लिसनर: किसी तत्व पर इवेंट हैंडलर सेट करने के लिए addEventListener() का उपयोग करें।
इवेंट ऑब्जेक्ट: जब कोई इवेंट होती है, तो एक इवेंट ऑब्जेक्ट पास होता है जिसे विस्तृत जानकारी प्राप्त करने के लिए उपयोग किया जा सकता है।
इवेंट प्रसार: इवेंट्स दो चरणों में प्रसारित होते हैं: बबलिंग और कैप्चरिंग।
फॉर्म इवेंट्स और कस्टम इवेंट्स: आप फॉर्म सबमिशन और अपने कस्टम इवेंट्स को हैंडल कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

JavaScript में शैडो DOM

जावास्क्रिप्ट में इवेंट हैंडलिंग

YouTube Video

जावास्क्रिप्ट में इवेंट हैंडलिंग

इवेंट्स के मूल सिद्धांत

इवेंट लिसनर्स जोड़ना

addEventListener() की बुनियादी सिंटैक्स

इवेंट ऑब्जेक्ट

उदाहरण: इवेंट ऑब्जेक्ट का उपयोग करना

सामान्य इवेंट्स

क्लिक इवेंट

कीबोर्ड इवेंट्स

माउस इवेंट्स

फॉर्म इवेंट्स

उदाहरण: फॉर्म सबमिशन पर पेज रीलोड रोकना

इवेंट प्रसार (बब्बलिंग और कैप्चरिंग)

इवेंट बब्बलिंग

उदाहरण: बब्बलिंग का उदाहरण

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

stopPropagation() के साथ प्रसार को रोकना

इवेंट्स हटाना

कस्टम इवेंट्स

सारांश

YouTube Video

`addEventListener()` की बुनियादी सिंटैक्स

`stopPropagation()` के साथ प्रसार को रोकना