Adding event listeners click, mouseover, etc In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में इवेंट लिस्ट्नेर्स का यूज़ वेबसाइट वेबपेज डॉम में एलिमेंट रिसोर्सेज के साथ वेब यूजर इंटरैक्शन को मैनेज और कण्ट्रोल करने में किया जाता है, जिसमे कि सिस्टम माउस क्लिक, माउस मल्टीप्ल मूवमेंट एक्टिविटीज, माउस की प्रेस एक्टिविटीज, आदि है। जहा इवेंट लिस्ट्नेर्स वेब डेवलपर को डॉम एलिमेंट में मल्टीप्ल इवेंट्स को रिप्लाई करने की परमिशन प्रोवाइड करते हैं, जिसके माध्यम से वेब डेवेलपर किसी वेबसाइट को इंटरैक्टिव क्रिएट कर सकते हैं।
So, let’s get to know more about event listeners in JavaScript such as mouse click, mouseover, mouse keydown, etc.
What is an event listener in JavaScript?
जावास्क्रिप्ट प्रोग्रामिंग डॉम में इवेंट लिस्टनेर एक बिल्ट-इन सिस्टम फ़ंक्शन है, जो किसी वेबपेज स्पेसिफिक डॉम एलिमेंट जैसे, माउस बटन क्लिक एक्शन, माउस मूवमेंट, यूजर द्वारा ट्रिगर होने पर किसी पर्टिकुलर इवेंट के होने का वेट करता है। जब डॉम सिस्टम में इवेंट ट्रिगर या एक्सेक्यूट होता है, तो इवेंट लिस्टर मौजूदा फ़ंक्शन को एक्सेक्यूट करता है, जिससे वेब डेवलपर उस इवेंट के रिप्लाई में इवेंट लिस्ट्नेर्स बिहैवियर या मल्टीप्ल एक्टिविटीज को डिफाइन कर सकते हैं।
The syntax for adding an event listener in JavaScript.
element.addEventListener(‘event’, callbackFunction);
- element – एलिमेंट यह एक डॉम एलिमेंट है, जो की यूजर इवेंट लिस्टनेर को ऐड करता है।
- ‘event’ – यह डॉम एलिमेंट में ईवेंट का टाइप है, जैसे, ‘माउस क्लिक’, ‘माउसओवर’, ‘कीडाउन’, आदि की मूवमेंट इवेंट है।
- callback function – यह डॉम एलिमेंट में वह फ़ंक्शन होता है. जो ईवेंट कम्पलीट होने पर एक्सेक्यूट होता है।
Types of common events in JavaScript.
यहाँ आपको जावास्क्रिप्ट प्रोग्रामिंग में कुछ सबसे अधिक यूज़ होने वाले ईवेंट टाइप दिए गए हैं, जिन्हे प्रोग्रामर जावास्क्रिप्ट प्रोग्रामिंग में इवेंट लिस्टनेर एक्टिविटीज या टास्क के लिए उपयोग कर सकते है.
common System EventListener Type.
- click – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट जैसे, बटन, लिंक में क्लिक करने पर ट्रिगर हो जाता है।
- mouseover – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट में माउस पॉइंटर पर किसी एलिमेंट पर होवर करने पर ट्रिगर हो जाता है।
- mouseout – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट माउस पॉइंटर में किसी एलिमेंट को छोड़ने पर ट्रिगर हो जाता है।
- keydown – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट किसी की को प्रेस करने पर ट्रिगर हो जाता है।
- keyup – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट में किसी की को छोड़ने पर ट्रिगर हो जाता है।
- submit – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट में फ़ॉर्म सबमिट करने पर ट्रिगर हो जाता है।
- focus – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट किसी इनपुट एलिमेंट पर फ़ोकस होने पर ट्रिगर हो जाता है।
- blur – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट में किसी इनपुट एलिमेंट का फ़ोकस खोने पर ट्रिगर हो जाता है।
- resize – यह इवेंट लिस्टनेर में वेब यूजर द्वारा किसी डॉम एलिमेंट में विंडो का साइज मॉडिफाई होने पर ट्रिगर हो जाता है।
Adding event listeners for different events in JavaScript.
Click Event Activities.
यह इवेंट लिस्टनेर में सबसे कॉमन ईवेंट में से एक इवेंट है। क्लिक इवेंट का यूज़ तब किया जाता है, जब वेब यूजर किसी डॉम एलिमेंट जैसे, बटन पर मैन्युअली क्लिक करता है।
<button id=”testButton”>press Button </button>
// let create code to the Select the button
const button = document.getElementById(‘testButton’);
// let we can Add a click event listener to execute dom event
button.addEventListener(‘click’, () => {
alert(‘Button was pressed’);
});
mouseover and mouseout DOM event tasks in JavaScript.
जावास्क्रिप्ट डोम में mouseover ईवेंट तब ट्रिगर या एक्सेक्यूट होता है, जब इंटरनेट यूजर माउस पॉइंटर में किसी एलिमेंट पर मैन्युअल होवर करता है, वही mouseout ईवेंट तब ट्रिगर या एक्सेक्यूट होता है, जब इंटरनेट यूजर माउस पॉइंटर एलिमेंट से बाहर से मूव करता है।
<div id=”hoverrange” style=”width: 230px; height: 230px; background-color: lime;”>
let Hover over
</div>
// let we can Select the hover range element
const hoverrange = document.getElementById(‘hoverrange’);
// let we Add a mouseover event listener in hover action
hoverrange.addEventListener(‘mouseover’, () => {
hoverrange.style.backgroundColor = ‘aqua’; // we Change here background color on hover action
});
// here we Add a mouseout event listener action
hoverrange.addEventListener(‘mouseout’, () => {
hoverrange.style.backgroundColor = ‘yellow’; // here we Reset background color when mouse leaves with mouseout
});
keydown and keyup event tasks in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में keydown इवेंट एक्शन तब एक्सेक्यूट या ट्रिगर होता है, जब इंटरनेट यूजर द्वारा कोई की प्रेस की जाती है, और keyup इवेंट परफॉर्म होता है, या इंटरनेट यूजर द्वारा की को छोड़ा जाता है।
<input type=”text” id=”inputField” placeholder=”Write desire text here…” />
// here we can Select the input field type
const inputField = document.getElementById(‘inputField’);
// now let we Add a keydown event listener to action
inputField.addEventListener(‘keydown’, (event) => {
console.log(`Key cliked: ${event.key}`); // here Log the key is clicked
});
// now here we Add a keyup event listener action
inputField.addEventListener(‘keyup’, (event) => {
console.log(`Key release: ${event.key}`); // here the Log the key is release
});
JavaScript submit button event for a form.
जावास्क्रिप्ट वेबपेज में किसी फ़ॉर्म में सबमिट बटन प्रेस करने पर सबमिट इवेंट ट्रिगर होता है, इस इवेंट का मुख्य यूज़ ऑनलाइन फ़ॉर्म वेलिडेशन के लिए होता है।
<form id=”testForm”>
<input type=”text” id=”emp_name” placeholder=”Employee name” />
<button type=”submit”>Submit</button>
</form>
// let here we Select the form for submit action
const form = document.getElementById(‘testForm’);
// let we Add a submit event listener to submit form
form.addEventListener(‘submit’, (event) => {
event.preventDefault(); // here it Prevent the form from actually submit activities
alert(‘Form submit’);
});
Event Listener Parameters in JavaScript.
जावास्क्रिप्ट प्रोग्राम में इवेंट लिस्टनेर ऐड करते समय प्रोग्रामर पूर्व में घटित हुए इवेंट के बारे में इनफार्मेशन रिसीव कर सकते हैं। जहा इवेंट ऑब्जेक्ट में डिस्क्रिप्शन होते हैं, जैसे कि, इवेंट के दौरान कौन सी की प्रेस की गई, डॉम एलिमेंट में किस एलिमेंट पर क्लिक किया गया, आदि इनफार्मेशन इसमें स्टोर होती है।
Event Listener Parameters Example.
button.addEventListener(‘click’, (event) => {
console.log(event); // here it Logs the event object activities
console.log(‘Dom Element click:’, event.target); // here it Logs the element that was click action
});
Removing an event listener in JavaScript.
जब यूजर जावास्क्रिप्ट में किसी पर्टिकुलर डोम इवेंट लिस्टनेर को नहीं चाहते हैं, तो प्रोग्रामर मौजूदा डोम इवेंट लिस्टनेर को भी रिमूव कर सकते हैं। इसके लिए यूजर removeEventListener() मेथड को अप्लाई करें, जिसके लिए addEventListener() मेथड के जैसे ही पैरामीटर की जरूरत होती है।
const button = document.getElementById(‘testButton’);
// here we Define the event handler function action
const manageClick = () => {
alert(‘Button is click’);
};
// here we Add the event listener action
button.addEventListener(‘click’, manageClick);
// here we Remove the event listener action
button.removeEventListener(‘click’, manageClick);
Event Propagation and Bubbling in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में डॉम में इवेंट दो स्टेप में होते हैं.
- यह कैप्चर चरण, इसमें इवेंट डॉम में नीचे की ओर मूव करता है.
- यह बबलिंग चरण, इसमें इवेंट डॉम में ऊपर की ओर मूव करता है.
जावास्क्रिप्ट प्रोग्रामिंग में डिफ़ॉल्ट रूप से, अधिकांश इवेंट बबल अप आर्डर में परफॉर्म होते हैं, इसका मतलब है कि किसी चाइल्ड एलिमेंट पर ट्रिगर किया गया इवेंट अपने पैरेंट एलिमेंट पर भी उसी इवेंट को ट्रिगर करता है, जब तक कि उस इवेंट को स्टॉप किया न जाए।
यदि जावास्क्रिप्ट प्रोग्रामर किसी इवेंट को बबलिंग से स्टॉप करना चाहते हैं, तो इवेंट ऑब्जेक्ट पर stopPropagation() मेथड को अप्लाई करे.
button.addEventListener(‘click’, (event) => {
event.stopPropagation(); // here it use to Prevent the event from bubbling up action
alert(‘Button is click’);
});
Event Delegation in JavaScript.
जावास्क्रिप्ट वेबपेज डॉम एलिमेंट में मल्टीप्ल डिफरेंट चाइल्ड एलिमेंट में इवेंट लिस्टनेर को ऐड करने के बजाय, प्रोग्रामर लिस्टनेर को पैरेंट एलिमेंट से ऐड करके इवेंट डेलिगेशन को यूज़ कर सकते हैं। यह तब तक यूज़फुल है, जब प्रोग्रामर ने डायनामिक रूप से एलिमेंट क्रिएट किए हों या लार्ज नंबर में इक्वल एलिमेंट मौजूद हों।
<ul id=”list”>
<li>task 1</li>
<li>task 2</li>
<li>task 3</li>
<li>task 4 </li>
</ul>
// here we Add a click event listener to the parent list <ul> dom element for webpage
const list = document.getElementById(‘list’);
list.addEventListener(‘click’, (event) => {
if (event.target.tagName === ‘LI’) {
alert(`Item click ${event.target.textContent}`);
}
});
Summary of Event Listeners in JavaScript Programming.
- Add event listeners – जावास्क्रिप्ट डॉम एलिमेंट में क्लिक, माउसओवर, कीडाउन आदि जैसे ईवेंटलिस्टनेर को ऐड करने के लिए addEventListener() फंक्शन का यूज़ करें।
- Common events – जावास्क्रिप्ट डॉम एलिमेंट में क्लिक, माउसओवर, माउसआउट, कीडाउन, कीअप, सबमिट, आदि इवेंट को ट्रिगर या एक्सेक्यूट करने के लिए यूज़ करे।
- Remove event listeners – जावास्क्रिप्ट डॉम एलिमेंट में किसी ईवेंट लिस्टनेर को रिमूव करने के लिए removeEventListener() फंक्शन को यूज़ करें।
- Event object – जावास्क्रिप्ट डॉम एलिमेंट में घटित हुई ईवेंट जैसे, event.target, event.key के बारे में लोग इनफार्मेशन को प्रोवाइड करता है।
- Event propagation – यह जावास्क्रिप्ट डॉम एलिमेंट में ईवेंट डिफ़ॉल्ट रूप से बबल होते हैं, लेकिन आप इसे stopPropagation() फंक्शन मेथड से स्टॉप कर सकते हैं।
- Event delegation – जावास्क्रिप्ट डॉम एलिमेंट में चाइल्ड एलिमेंट्स के कुशल ईवेंट मैनेजमेंट के लिए ईवेंट लिस्टनेर को पैरेंट एलिमेंट्स से ऐड करता है।
