PGDCA, BCA, B-Tech, MCA, M-Tech, B.Sc computer science राजस्थान सूचना सहायक व कंप्यूटर शिक्षक विशेष नोट्स: इस अध्याय में हम JavaScript Event Handling: addEventListener, Event Object (JS इवेंट हैंडलिंग: addEventListener, क्लिक, सबमिट, कीबोर्ड इवेंट्स) की संपूर्ण थ्योरी, मुख्य तकनीकी बिंदु, तुलनात्मक तालिका और विगत परीक्षाओं के पैटर्न पर आधारित 20 अति-महत्वपूर्ण बहुविकल्पीय प्रश्न (MCQs) विस्तृत हिंदी व अंग्रेजी व्याख्या सहित पढ़ेंगे।
Overview: JavaScript Event Handling connects user actions and browser lifecycle signals via addEventListener, supplying a rich Event object containing target, currentTarget, preventDefault(), and keyboard/mouse metadata.
अध्याय सार: JavaScript में addEventListener के माध्यम से क्लिक, कीबोर्ड प्रेस और फॉर्म सबमिट जैसे इवेंट्स को हैंडल किया जाता है, जिसमें Event ऑब्जेक्ट लक्ष्य (target), currentTarget और preventDefault() जैसी सुविधाएं देता है।
JavaScript Event Handling: addEventListener, Event Object: Detailed Notes & Architecture (JS इवेंट हैंडलिंग: addEventListener, क्लिक, सबमिट, कीबोर्ड इवेंट्स)
1. Why addEventListener Beats Inline & On-Property Handlers (addEventListener बनाम इनलाइन ऑन-प्रॉपर्टी हैंडलर्स)
[EN] Assigning element.onclick = fn allows only a single handler—any later assignment overwrites the previous callback. element.addEventListener(type, listener, options) registers multiple independent listeners on the same event, enables capturing-phase control, supports { once: true } auto-cleanup, and allows clean removal via removeEventListener.
[HI] element.onclick पर एक समय में सिर्फ एक ही फंक्शन सेट हो सकता है (नया लगाने पर पुराना हट जाता है)। इसके विपरीत addEventListener एक ही इवेंट पर कई स्वतंत्र लिसनर्स जोड़ सकता है और once या removeEventListener का नियंत्रण देता है।
2. Inside the Event Object: target vs currentTarget (Event ऑब्जेक्ट: target बनाम currentTarget)
[EN] Every listener automatically receives an Event object argument. Inside it, event.target identifies the innermost element where the interaction actually happened (for example, a clicked <span> inside a <button>), whereas event.currentTarget identifies the element to which that listener was attached (the <button> or parent container).
[HI] इवेंट लिसनर को मिलने वाले Event ऑब्जेक्ट में event.target वह वास्तविक अंदरूनी एलिमेंट होता है जिस पर क्लिक हुआ, जबकि event.currentTarget वह एलिमेंट होता है जिस पर addEventListener लगाया गया था।
3. Controlling Default Behavior: event.preventDefault() (डिफ़ॉल्ट व्यवहार रोकना: preventDefault())
[EN] Many HTML elements trigger built-in browser defaults: <a> links navigate, <form> elements submit and reload pages, and right-clicking opens context menus. Calling event.preventDefault() inside the listener cancels that default browser action (if event.cancelable is true) without stopping event bubbling.
[HI] फॉर्म सबमिट होने से पेज रिफ्रेश न हो या लिंक क्लिक पर नेविगेशन रुक जाए—इसके लिए event.preventDefault() चलाया जाता है। ध्यान रहे यह सिर्फ डिफ़ॉल्ट क्रिया रोकता है, इवेंट बबलिंग को नहीं रोकता।
4. Listener Options: once, passive, capture & removeEventListener (लिसनर विकल्प एवं removeEventListener नियम)
[EN] Passing { once: true } removes a listener automatically after its first execution, while { passive: true } tells scroll/touch handlers they will never call preventDefault() for smooth scrolling. To remove a listener with removeEventListener(type, fn), you MUST pass the exact same named function reference rather than an anonymous inline function.
[HI] { once: true } से लिसनर केवल एक बार चलकर हट जाता है और { passive: true } स्क्रॉल परफॉर्मेंस बढ़ाता है। removeEventListener तभी काम करता है जब वही नामित फंक्शन रेफरेंस पास किया जाए जो जोड़ते समय दिया गया था।
Syntax, Formula & Technical Example (JavaScript Event Handling: addEventListener, Event Object)
const form = document.querySelector('#login-form');
function handleSubmit(e) {
e.preventDefault(); // Stops page reload
console.log('Clicked:', e.target, 'Bound to:', e.currentTarget);
}
form.addEventListener('submit', handleSubmit);
// Removal requires same function reference:
// form.removeEventListener('submit', handleSubmit);JavaScript Event Handling: addEventListener, Event Object Quick Reference & Comparison Table
| Event API Feature | Technical Purpose | Important Caveat |
|---|---|---|
| addEventListener(t, fn, opts) | Registers multiple non-overwriting event callbacks | Accepts capture, once, and passive options |
| event.target | Innermost element that originated the event | Key property behind Event Delegation |
| event.currentTarget | Element currently running the attached listener | Matches 'this' inside non-arrow handlers |
| event.preventDefault() | Cancels default browser behavior (e.g. form reload) | Does NOT stop event bubbling up DOM |
JavaScript Event Handling: addEventListener, Event Object Top 20 Bilingual MCQs with Answers
Q1. Why must event handlers NOT be written as anonymous functions if you intend to use removeEventListener()?
(यदि आप बाद में removeEventListener() उपयोग करना चाहते हैं, तो anonymous (गुमनाम) फंक्शन क्यों नहीं देना चाहिए?)
(A) Anonymous functions cannot run twice
(B) removeEventListener only removes onclick attributes
(C) Browsers freeze anonymous callbacks
(D) removeEventListener requires the exact same function reference in memory that was passed to addEventListener
Correct Answer: (D)
[EN] Two identical-looking anonymous arrow functions create distinct memory references, so removeEventListener cannot match them.
[HI] दो अलग-अलग दिखने वाले एक जैसे anonymous फंक्शन मेमोरी में अलग पते पर होते हैं, अतः वे मैच होकर हटते नहीं हैं।
Q2. What happens if a user clicks a <b> icon inside a <button> that has a click listener?
(यदि क्लिक लिसनर <button> पर लगा है और यूज़र उसके अंदर स्थित <b> टैग पर क्लिक करे तो क्या होगा?)
(A) The click never reaches <button>
(B) event.target is <b> while event.currentTarget is <button>
(C) Both target and currentTarget are <button>
(D) Both target and currentTarget are <b>
Correct Answer: (B)
[EN] event.target identifies the clicked leaf node (<b>), whereas event.currentTarget stays the bound listener element (<button>).
[HI] अंदर के जिस <b> पर क्लिक हुआ वह event.target है, और जिस <button> पर लिसनर लगा था वह event.currentTarget है।
Q3. Which method cancels a form submission page reload inside a 'submit' event listener?
('submit' इवेंट लिसनर में फॉर्म सबमिट होने से पेज रीलोड होने की डिफ़ॉल्ट क्रिया कैसे रोकी जाती है?)
(A) event.preventDefault()
(B) event.stopPropagation()
(C) return null
(D) event.cancelForm()
Correct Answer: (A)
[EN] event.preventDefault() prevents the browser's built-in form submission navigation so JavaScript/AJAX can handle it.
[HI] event.preventDefault() फॉर्म की डिफ़ॉल्ट सबमिट/रीलोड क्रिया को रोक देता है ताकि Fetch/AJAX चल सके।
Q4. How can a click listener be configured to fire ONLY once and automatically detach itself afterward?
(कोई क्लिक लिसनर केवल एक ही बार चले और फिर स्वतः हट जाए—इसके लिए addEventListener में कौन सा विकल्प है?)
(A) btn.addEventListener('once:click', fn)
(B) btn.addEventListener('click', fn, { repeat: 1 })
(C) btn.addEventListener('click', fn, { once: true })
(D) btn.addSingleListener('click', fn)
Correct Answer: (C)
[EN] The { once: true } option executes the callback one time and removes it automatically without removeEventListener.
[HI] addEventListener के तीसरे पैरामीटर में { once: true } देने से वह एक बार चलने के बाद स्वतः हट जाता है।
Q5. What is the crucial difference between btn.onclick = fn2 vs btn.addEventListener('click', fn2) if fn1 already exists?
(यदि fn1 पहले से लगा है, तो btn.onclick = fn2 और btn.addEventListener('click', fn2) में क्या अंतर है?)
(A) Both run only fn2
(B) addEventListener overwrites fn1
(C) onclick executes before HTML loads
(D) onclick overwrites fn1, whereas addEventListener keeps both fn1 and fn2 active
Correct Answer: (D)
[EN] DOM Level 0 properties (onclick) hold only one handler slot, whereas DOM Level 2 addEventListener chains listeners.
[HI] onclick प्रॉपर्टी पिछले फंक्शन को हटा देती है, जबकि addEventListener एक ही इवेंट पर कई फंक्शन्स जोड़ सकता है।
Q6. In an arrow function listener btn.addEventListener('click', (e) => { ... }), what does 'this' refer to?
(arrow function लिसनर में 'this' कीवर्ड किसे संदर्भित करता है?)
(A) Always the clicked btn element
(B) The enclosing lexical scope (such as window), NOT necessarily btn
(C) Always null
(D) Always e.target
Correct Answer: (B)
[EN] Regular functions bind 'this' to e.currentTarget, whereas arrow functions inherit 'this' lexically—use e.currentTarget inside arrows.
[HI] सामान्य फंक्शन में 'this' एलिमेंट होता है, पर arrow function में 'this' बाहरी स्कोप लेता है; इसलिए e.currentTarget उपयोग करें।
Q7. Which KeyboardEvent property gives the actual character/key value produced, such as 'Enter' or 'a'?
(KeyboardEvent में दबाई गई कुंजी का वास्तविक नाम जैसे 'Enter', 'Escape' या 'a' किस प्रॉपर्टी से मिलता है?)
(A) event.key
(B) event.asciiCode
(C) event.whichKey
(D) event.charInt
Correct Answer: (A)
[EN] Modern JS replaces deprecated keyCode/which with readable event.key ('Enter', 'Shift', 'A') and physical key position event.code ('KeyA').
[HI] आधुनिक JS में पुराने keyCode की जगह event.key ('Enter', 'a') और भौतिक की-लोकेशन हेतु event.code मानक हैं।
Q8. Which DOM event fires after every individual character change inside an <input type='text'>, unlike 'change'?
(<input> में प्रत्येक अक्षर टाइप करने या पेस्ट करने पर तुरंत कौन सा इवेंट चलता है?)
(A) 'input'
(B) 'change'
(C) 'submit'
(D) 'blur'
Correct Answer: (A)
[EN] 'input' triggers immediately on every keystroke/paste, whereas 'change' waits until the input loses focus (blur).
[HI] 'input' इवेंट हर टाइप किए गए अक्षर पर तुरंत चलता है, जबकि 'change' फोकस बाहर जाने (blur) के बाद चलता है।
Q9. What is the difference between DOMContentLoaded and window 'load' events?
(DOMContentLoaded और window 'load' इवेंट्स में क्या अंतर है?)
(A) DOMContentLoaded waits for external videos and images
(B) DOMContentLoaded fires when HTML is parsed into the DOM; 'load' waits until all images, CSS, and subframes finish downloading
(C) 'load' fires before HTML finishes parsing
(D) Both fire at the exact same millisecond
Correct Answer: (B)
[EN] DOMContentLoaded allows JS to run early without blocking on heavy images/media downloads.
[HI] HTML से DOM बनते ही DOMContentLoaded चल जाता है, जबकि 'load' सभी इमेज व CSS डाउनलोड होने तक इंतजार करता है।
Q10. What does setting { passive: true } inside a 'wheel' or 'touchstart' listener signal to the browser?
(स्क्रॉल/टच इवेंट्स में { passive: true } देने से ब्राउज़र को क्या संकेत मिलता है?)
(A) That the listener will NOT call event.preventDefault(), allowing smooth non-blocking scrolling
(B) That the listener runs only in background threads
(C) That bubbling is disabled
(D) That event.target will be disabled
Correct Answer: (A)
[EN] Because browsers do not wait for JS to check preventDefault(), passive listeners dramatically reduce mobile scroll lag.
[HI] ब्राउज़र समझ जाता है कि स्क्रॉल रोका नहीं जाएगा, जिससे मोबाइल स्क्रॉलिंग बिना अटके (lag-free) चलती है।
Q11. Which mouse event triggers when moving onto a parent WITHOUT re-firing when crossing child boundaries?
(माउस को एलिमेंट पर ले जाने पर कौन सा इवेंट अंदरूनी चाइल्ड टैग्स पर जाने से बार-बार नहीं चलता?)
(A) mousemove
(B) mouseover
(C) mousehover
(D) mouseenter
Correct Answer: (D)
[EN] mouseenter/mouseleave do NOT bubble, unlike mouseover/mouseout which refire across nested children.
[HI] mouseover बबल होने से बार-बार ट्रिगर होता है, जबकि mouseenter बच्चों के बीच जाने पर दोबारा नहीं चलता।
Q12. Does event.preventDefault() prevent an event from bubbling upward to parent elements?
(क्या event.preventDefault() कॉल करने से इवेंट ऊपर पैरेंट एलिमेंट्स तक बबल होना रुक जाता है?)
(A) Yes, unless capture=true
(B) Yes, it stops both default action and bubbling
(C) It stops bubbling only on <a> links
(D) No; preventDefault() only cancels default browser actions, while stopPropagation() stops bubbling
Correct Answer: (D)
[EN] Default action control (preventDefault) and tree propagation control (stopPropagation) are completely separate mechanisms.
[HI] preventDefault() केवल डिफ़ॉल्ट क्रिया रोकता है; ऊपर जाने (बबलिंग) को रोकने के लिए stopPropagation() चाहिए।
Q13. How can you verify inside a handler whether a browser default action can actually be canceled?
(इवेंट हैंडलर के अंदर यह कैसे जांचा जाता है कि इस इवेंट की डिफ़ॉल्ट क्रिया रद्द की जा सकती है या नहीं?)
(A) Check event.isTrusted
(B) Check boolean event.cancelable
(C) Check event.bubbles
(D) Check event.returnValue === null
Correct Answer: (B)
[EN] Non-cancelable events like scroll ignore preventDefault(); event.cancelable tells you if cancellation is permitted.
[HI] यदि event.cancelable true हो तभी preventDefault() प्रभावी होता है।
Q14. Which property tells whether an event was generated by a real user click versus script element.click()?
(कौन सी प्रॉपर्टी बताती है कि इवेंट असली यूज़र द्वारा किया गया है या JS के element.click() कोड द्वारा?)
(A) event.isTrusted
(B) event.nativeEvent
(C) event.manual
(D) event.isHuman
Correct Answer: (A)
[EN] event.isTrusted is true for real user interactions and false for synthetic events dispatched by scripts.
[HI] असली यूजर क्लिक के लिए event.isTrusted true होता है और स्क्रिप्ट द्वारा भेजे गए इवेंट के लिए false।
Q15. Which event is recommended for handling form reset or keyboard focus loss without bubbling?
(किस इवेंट का उपयोग इनपुट फ़ील्ड से फ़ोकस हटने पर किया जाता है और वह बबल नहीं होता?)
(A) change
(B) blur (use focusout if bubbling is needed)
(C) focusin
(D) keydown
Correct Answer: (B)
[EN] blur and focus do NOT bubble, whereas focusout and focusin bubble cleanly through parent elements.
[HI] blur और focus बबल नहीं होते, जबकि focusout और focusin बबल होते हैं।
Q16. In el.addEventListener('click', fn, true), what does the boolean third parameter 'true' specify?
(el.addEventListener('click', fn, true) में तीसरा पैरामीटर 'true' क्या दर्शाता है?)
(A) The listener fires only once
(B) The listener runs passively
(C) The listener blocks all keyboard input
(D) The listener executes during the Capturing Phase (top-down) instead of the default Bubbling Phase
Correct Answer: (D)
[EN] The third boolean parameter sets useCapture: true runs in capture phase; false (default) runs in bubbling phase.
[HI] तीसरा बूलियन मान true रखने पर लिसनर Capturing Phase (ऊपर से नीचे) में चलता है।
Q17. Within JavaScript Event Handling: addEventListener, Event Object, which event api feature directly maps to: "Registers multiple non-overwriting event callbacks"?
(JavaScript Event Handling: addEventListener, Event Object में कौन सा Event API Feature सीधे "Registers multiple non-overwriting event callbacks" से संबंधित है?)
(A) addEventListener(t, fn, opts)
(B) event.target
(C) event.preventDefault()
(D) event.currentTarget
Correct Answer: (A)
[EN] In JavaScript Event Handling: addEventListener, Event Object, 'addEventListener(t, fn, opts)' handles 'Registers multiple non-overwriting event callbacks' (Accepts capture, once, and passive options).
[HI] JavaScript Event Handling: addEventListener, Event Object में 'addEventListener(t, fn, opts)' का कार्य/विवरण 'Registers multiple non-overwriting event callbacks' (Accepts capture, once, and passive options) है।
Q18. Which option accurately describes 'event.target' in JavaScript Event Handling: addEventListener, Event Object?
(JavaScript Event Handling: addEventListener, Event Object के संदर्भ में 'event.target' की सही विशेषता कौन सी है?)
(A) Cancels default browser behavior (e.g. form reload)
(B) Element currently running the attached listener
(C) Registers multiple non-overwriting event callbacks
(D) Innermost element that originated the event
Correct Answer: (D)
[EN] 'event.target' provides 'Innermost element that originated the event' — key point: Key property behind Event Delegation.
[HI] 'event.target' का मुख्य विवरण 'Innermost element that originated the event' है (Key property behind Event Delegation)।
Q19. In JavaScript Event Handling: addEventListener, Event Object, identify the correct parameter for the specification: "Element currently running the attached listener".
(JavaScript Event Handling: addEventListener, Event Object में "Element currently running the attached listener" विवरण किस विकल्प के लिए सही है?)
(A) addEventListener(t, fn, opts)
(B) event.currentTarget
(C) event.preventDefault()
(D) event.target
Correct Answer: (B)
[EN] 'event.currentTarget' corresponds to 'Element currently running the attached listener' (Matches 'this' inside non-arrow handlers).
[HI] 'event.currentTarget' का संबंध 'Element currently running the attached listener' (Matches 'this' inside non-arrow handlers) से है।
Q20. Considering JavaScript Event Handling: addEventListener, Event Object, what key behavior defines 'event.preventDefault()'?
(JavaScript Event Handling: addEventListener, Event Object में 'event.preventDefault()' की मुख्य भूमिका या मान क्या है?)
(A) Innermost element that originated the event
(B) Registers multiple non-overwriting event callbacks
(C) Element currently running the attached listener
(D) Cancels default browser behavior (e.g. form reload)
Correct Answer: (D)
[EN] 'event.preventDefault()' represents 'Cancels default browser behavior (e.g. form reload)' (Does NOT stop event bubbling up DOM).
[HI] 'event.preventDefault()' का अर्थ/मान 'Cancels default browser behavior (e.g. form reload)' है (Does NOT stop event bubbling up DOM)।
JavaScript Event Handling: addEventListener, Event Object — Exam FAQs
Q1: Why did my click handler stop working when I replaced innerHTML?
innerHTML बदलने के बाद मेरे एलिमेंट्स पर लगा click इवेंट काम करना क्यों बंद कर देता है?
[EN] Rewriting innerHTML destroys old DOM nodes along with their bound listeners. Either reattach listeners or use Event Delegation on a static parent.
[HI] innerHTML बदलने से पुराने DOM नोड्स व उनके इवेंट्स नष्ट हो जाते हैं। इससे बचने के लिए पैरेंट पर Event Delegation लगाएं।
Q2: Which event handles Enter key presses accurately in modern browsers?
आधुनिक ब्राउज़र्स में Enter कुंजी दबाने की जांच के लिए कौन सा कोड सबसे सही है?
[EN] Listen for 'keydown' and check if (event.key === 'Enter'). Avoid the deprecated 'keypress' event and legacy keyCode property.
[HI] 'keydown' इवेंट पर event.key === 'Enter' जांचना मानक है; पुराना keypress और keyCode अब अमान्य (deprecated) हैं।
Q3: What does event.stopImmediatePropagation() do beyond event.stopPropagation()?
event.stopImmediatePropagation() और stopPropagation() में क्या अतिरिक्त फर्क है?
[EN] stopPropagation() stops parents from firing, while stopImmediatePropagation() ALSO stops any remaining listeners attached to the exact same element.
[HI] stopPropagation केवल ऊपर पैरेंट्स को रोकता है, जबकि stopImmediatePropagation उसी एलिमेंट पर लगे बाकी लिसनर्स को भी रोक देता है।
Post a Comment
Post a Comment