JavaScript Event Handling MCQs

Q: 1. Which method is the standard and recommended way to attach an event handler to a DOM element in modern JavaScript?

See the full post for the detailed answer.

Q: 2. What is the primary difference between addEventListener and legacy inline event handlers (e.g., element.onclick)?

See the full post for the detailed answer.

Q: 3. What are the three phases of event propagation in the DOM event flow?

See the full post for the detailed answer.

Q: 4. During which phase of event propagation do event listeners with the capture option set to `true` execute?

See the full post for the detailed answer.

Q: 5. What does event bubbling refer to?

See the full post for the detailed answer.

Q: 6. Which method stops the propagation of an event further along the DOM tree (preventing bubbling or capturing)?

See the full post for the detailed answer.

Q: 7. What does event.stopImmediatePropagation() do beyond what event.stopPropagation() does?

See the full post for the detailed answer.

Q: 8. What is the purpose of event.preventDefault()?

See the full post for the detailed answer.

Q: 9. What is event delegation?

See the full post for the detailed answer.

Q: 10. What is the difference between `event.target` and `event.currentTarget` inside an event handler?

See the full post for the detailed answer.

1. Which method is the standard and recommended way to attach an event handler to a DOM element in modern JavaScript?

a) element.attachEvent()

b) element.addEventListener()

c) element.on()

d) element.registerEvent()

Correct Answer: b) element.addEventListener()

Explanation:

addEventListener is the W3C standard method for attaching multiple event handlers to an element without overwriting existing ones.

2. What is the primary difference between addEventListener and legacy inline event handlers (e.g., element.onclick)?

a) addEventListener allows registering multiple listeners for the same event type on a single element, whereas inline handlers overwrite previous assignments.

b) Legacy handlers support event capturing while addEventListener does not.

c) addEventListener only works in strict mode.

d) Legacy handlers are faster because they bypass the DOM.

Correct Answer: a) addEventListener allows registering multiple listeners for the same event type on a single element, whereas inline handlers overwrite previous assignments.

Explanation:

Assignment to properties like onclick replaces any previously assigned handler function, whereas addEventListener accumulates them.

3. What are the three phases of event propagation in the DOM event flow?

a) Capturing phase, Target phase, Bubbling phase

b) Creation phase, Execution phase, Destruction phase

c) Bubble phase, Static phase, Dynamic phase

d) Root phase, Parent phase, Child phase

Correct Answer: a) Capturing phase, Target phase, Bubbling phase

Explanation:

DOM events first travel down from the root to the target (capturing), reach the target, and then bubble back up to the root.

4. During which phase of event propagation do event listeners with the capture option set to `true` execute?

a) Capturing phase

b) Bubbling phase

c) Target phase only

d) Asynchronous microtask queue

Correct Answer: a) Capturing phase

Explanation:

Setting the capture option (or third parameter) to true registers the listener to fire during the capturing phase as the event travels downward.

5. What does event bubbling refer to?

a) Events traveling upward from the target element through all its ancestors up to the document root

b) Events traveling downward from the window object to the target

c) Memory allocation spikes during rapid clicking

d) Asynchronous timer execution order

Correct Answer: a) Events traveling upward from the target element through all its ancestors up to the document root

Explanation:

Bubbling is the default behavior where an event triggered on a child element propagates upward through its parent elements.

6. Which method stops the propagation of an event further along the DOM tree (preventing bubbling or capturing)?

a) event.stopPropagation()

b) event.preventDefault()

c) event.cancelBubbleFlag()

d) event.halt()

Correct Answer: a) event.stopPropagation()

Explanation:

stopPropagation() prevents the event from bubbling up or capturing down further through ancestor or descendant nodes.

7. What does event.stopImmediatePropagation() do beyond what event.stopPropagation() does?

a) It prevents propagation to parent elements AND stops other event listeners on the exact same element from executing.

b) It cancels browser default actions immediately.

c) It deletes the event object from memory.

d) It forces synchronous garbage collection.

Correct Answer: a) It prevents propagation to parent elements AND stops other event listeners on the exact same element from executing.

Explanation:

stopImmediatePropagation halts both ancestor propagation and any remaining listeners registered on the current element.

8. What is the purpose of event.preventDefault()?

a) To cancel the browser's default action associated with the event (e.g., following a link or submitting a form)

b) To stop event bubbling up the DOM tree

c) To disable all event listeners on the page

d) To clear form inputs automatically

Correct Answer: a) To cancel the browser's default action associated with the event (e.g., following a link or submitting a form)

Explanation:

preventDefault stops default behaviors like form submissions or anchor navigation without necessarily stopping propagation.

9. What is event delegation?

a) A technique where a single event listener is attached to a parent element to manage events for multiple current or future child elements efficiently

b) Delegating event handling to a Web Worker thread

c) Passing event objects between different web pages

d) Replacing all click events with keyboard shortcuts

Correct Answer: a) A technique where a single event listener is attached to a parent element to manage events for multiple current or future child elements efficiently

Explanation:

Event delegation leverages event bubbling to handle events on common ancestors, reducing memory overhead and supporting dynamic elements.

10. What is the difference between `event.target` and `event.currentTarget` inside an event handler?

a) event.target is the element that triggered the event, while event.currentTarget is the element to which the event handler has been attached.

b) event.target is always the document root, while event.currentTarget is the mouse pointer coordinates.

c) They are identical in every circumstance.

d) event.target is used in capturing, while event.currentTarget is used in bubbling.

Correct Answer: a) event.target is the element that triggered the event, while event.currentTarget is the element to which the event handler has been attached.

Explanation:

Target represents where the interaction occurred, whereas currentTarget references the element running the listener function.

11. How does the `this` keyword behave inside a standard regular function used as an event listener?

a) It refers to `event.currentTarget` (the element to which the handler is attached).

b) It refers to the global window object always.

c) It refers to `event.target` always.

d) It is undefined in non-strict mode.

Correct Answer: a) It refers to `event.currentTarget` (the element to which the handler is attached).

Explanation:

In standard regular event handler functions, `this` is automatically bound to the element owning the listener.

12. How does `this` behave inside an arrow function used as an event listener?

a) It lexically inherits `this` from its enclosing outer scope, not pointing to the event target element.

b) It points to `event.currentTarget` automatically.

c) It throws a TypeError.

d) It points to the global object.

Correct Answer: a) It lexically inherits `this` from its enclosing outer scope, not pointing to the event target element.

Explanation:

Arrow functions do not bind their own `this`, meaning `this` inside an arrow event listener refers to outer lexical context.

13. Which method is used to remove an event listener previously attached with addEventListener?

a) element.removeEventListener()

b) element.deleteEventListener()

c) element.off()

d) element.detachEvent()

Correct Answer: a) element.removeEventListener()

Explanation:

removeEventListener removes a registered listener, requiring matching arguments (type, listener function, and options).

14. Why might `element.removeEventListener()` fail to remove a listener if passed an anonymous function?

a) Because anonymous functions lack a reference handle, making it impossible to pass the identical function signature required for removal.

b) Because anonymous functions bypass event bubbling.

c) Because removeEventListener only accepts named functions in strict mode.

d) It does not fail; anonymous functions can always be removed.

Correct Answer: a) Because anonymous functions lack a reference handle, making it impossible to pass the identical function signature required for removal.

Explanation:

To remove a listener, the exact same function reference passed to addEventListener must be supplied to removeEventListener.

15. What is the purpose of the `{ once: true }` option in addEventListener?

a) It automatically removes the event listener after it triggers for the first time.

b) It ensures the event fires only once per browser session.

c) It executes the handler in a single microtask.

d) It disables event bubbling.

Correct Answer: a) It automatically removes the event listener after it triggers for the first time.

Explanation:

The `once` option is a clean shorthand for self-removing event listeners after initial execution.

16. What does the `{ passive: true }` option signal to the browser in event listeners?

a) It signals that the listener will never call `event.preventDefault()`, allowing the browser to optimize scrolling performance without waiting for handler execution.

b) It makes the event listener read-only.

c) It runs the listener asynchronously in a Web Worker.

d) It disables event capturing.

Correct Answer: a) It signals that the listener will never call `event.preventDefault()`, allowing the browser to optimize scrolling performance without waiting for handler execution.

Explanation:

Passive listeners improve touch and scroll jank by assuring the browser that default scroll actions won't be cancelled.

17. How can you remove multiple event listeners simultaneously using an AbortController?

a) By passing an AbortSignal to the addEventListener options (`{ signal: controller.signal }`) and calling `controller.abort()`.

b) By calling `document.clearAllEvents()`.

c) By setting `element.innerHTML = ''`.

d) AbortController cannot be used with event listeners.

Correct Answer: a) By passing an AbortSignal to the addEventListener options (`{ signal: controller.signal }`) and calling `controller.abort()`.

Explanation:

AbortController provides a modern, elegant mechanism to teardown multiple event listeners at once.

18. How do you create and dispatch a custom event in JavaScript?

a) Using `new CustomEvent('eventName', { detail: data })` followed by `element.dispatchEvent(event)`.

b) Using `document.fireEvent('eventName')`.

c) Using `window.trigger('eventName', data)`.

d) Using `element.emit('eventName')`.

Correct Answer: a) Using `new CustomEvent('eventName', { detail: data })` followed by `element.dispatchEvent(event)`.

Explanation:

CustomEvent constructors allow passing custom payload data via the `detail` property before dispatching via dispatchEvent.

19. What is the difference between the `DOMContentLoaded` event and the `load` event on the window object?

a) DOMContentLoaded fires when HTML parsing is complete and the DOM tree is built, whereas load fires when the entire page including stylesheets, images, and subframes has fully loaded.

b) load fires before DOMContentLoaded.

c) DOMContentLoaded requires all images to be downloaded.

d) There is no difference.

Correct Answer: a) DOMContentLoaded fires when HTML parsing is complete and the DOM tree is built, whereas load fires when the entire page including stylesheets, images, and subframes has fully loaded.

Explanation:

DOMContentLoaded is faster for script initialization because it doesn't wait for asset downloads.

20. Which event fires when an HTML form is submitted?

a) "submit" on the form element

b) "click" on the submit button

c) "change" on input fields

d) "load" on the form

Correct Answer: a) "submit" on the form element

Explanation:

The submit event fires on the form itself when submitted via button click or Enter keypress, allowing validation before sending.

21. What is the difference between the `input` event and the `change` event on input/textarea elements?

a) The input event fires immediately on every value modification, whereas the change event fires only when the element loses focus or the value is committed.

b) The change event fires faster than input.

c) The input event only works for checkboxes.

d) They are identical.

Correct Answer: a) The input event fires immediately on every value modification, whereas the change event fires only when the element loses focus or the value is committed.

Explanation:

input provides real-time tracking, while change waits for commit actions like blurring or selecting options in a dropdown.

22. Which keyboard event property indicates the physical key pressed, regardless of keyboard layout or modifier keys?

a) event.code (e.g., "KeyA", "Space")

b) event.key (e.g., "a", " ")

c) event.keyCode

d) event.charCode

Correct Answer: a) event.code (e.g., "KeyA", "Space")

Explanation:

event.code reflects the physical key position on the keyboard, whereas event.key represents the character value produced.

23. Which keyboard event property represents the character value printed by the key press?

a) event.key

b) event.code

c) event.which

d) event.location

Correct Answer: a) event.key

Explanation:

event.key gives the evaluated character (like "a", "A", or "Enter"), accounting for shift states and language layouts.

24. What is debouncing in the context of high-frequency events like window resizing or scrolling?

a) A technique that delays function execution until a specified quiet period has elapsed since the last event trigger

b) Executing the handler function on every single event frame

c) Canceling all events permanently after one trigger

d) Throttling event execution to exactly once every 10ms

Correct Answer: a) A technique that delays function execution until a specified quiet period has elapsed since the last event trigger

Explanation:

Debouncing groups rapid successive event calls into a single execution after activity stops (useful for search inputs).

25. What is throttling in event handling?

a) A technique that ensures a function is executed at most once per specified time interval, regardless of how many times the event fires

b) Delaying execution until typing finishes completely

c) Doubling the frequency of event callbacks

d) Dropping all events after the first trigger

Correct Answer: a) A technique that ensures a function is executed at most once per specified time interval, regardless of how many times the event fires

Explanation:

Throttling guarantees periodic execution during continuous events like scrolling or mouse movement.

26. What does `event.composedPath()` return?

a) An array of nodes through which the event bubbled, including nodes inside Shadow DOM boundaries

b) The URL path of the current webpage

c) The coordinate array of mouse movement history

d) The prototype inheritance chain of the event object

Correct Answer: a) An array of nodes through which the event bubbled, including nodes inside Shadow DOM boundaries

Explanation:

composedPath traces the exact event propagation path across Shadow DOM and standard DOM trees.

27. What is the purpose of `event.isTrusted`?

a) It returns true if the event was generated by genuine user interaction, and false if dispatched programmatically via script.

b) It verifies if the event listener is secure against XSS.

c) It checks if the event came from an HTTPS source.

d) It indicates whether event propagation succeeded.

Correct Answer: a) It returns true if the event was generated by genuine user interaction, and false if dispatched programmatically via script.

Explanation:

isTrusted helps distinguish real hardware/browser user actions from synthetic dispatched events.

28. Which mouse event fires when the pointer enters an element, without bubbling to descendant child elements?

a) mouseenter

b) mouseover

c) pointerenter

d) focusin

Correct Answer: a) mouseenter

Explanation:

Unlike mouseover, mouseenter does not bubble, preventing repeated triggers when moving over internal child nodes.

29. Which mouse event bubbles and fires when the pointer enters an element or any of its descendants?

a) mouseover

b) mouseenter

c) pointerover

d) focus

Correct Answer: a) mouseover

Explanation:

mouseover bubbles upward and triggers whenever the pointer moves over the element or its child elements.

30. What is the difference between `click` and `dblclick` events?

a) click fires on a single primary pointer click, while dblclick fires when the pointer is clicked twice rapidly on the same element.

b) dblclick is synchronous, while click is asynchronous.

c) dblclick only works on mobile touch screens.

d) There is no difference.

Correct Answer: a) click fires on a single primary pointer click, while dblclick fires when the pointer is clicked twice rapidly on the same element.

Explanation:

Double-click detects two sequential clicks within a system-defined time window.

31. What does the `contextmenu` event represent?

a) It fires when the user attempts to open a context menu (typically via right-click).

b) It fires when text is copied to the clipboard.

c) It fires when a dropdown menu opens.

d) It fires when hovering over a navigation link.

Correct Answer: a) It fires when the user attempts to open a context menu (typically via right-click).

Explanation:

Preventing default on the contextmenu event allows building custom right-click menus in web applications.

32. Which event fires when an element loses focus?

a) "blur"

b) "focusout"

c) Both a and b

d) "change"

Correct Answer: c) Both a and b

Explanation:

Both blur and focusout signal focus loss, but focusout bubbles while blur does not.

33. Which focus-related event bubbles up the DOM tree, unlike its non-bubbling counterpart?

a) "focusin" (counterpart to focus)

b) "blur" (counterpart to focusout)

c) "load" (counterpart to DOMContentLoaded)

d) "input" (counterpart to change)

Correct Answer: a) "focusin" (counterpart to focus)

Explanation:

focusin and focusout bubble, allowing event delegation for focus states across forms or containers.

34. What is the `beforeunload` event used for?

a) To prompt the user with a confirmation dialog before leaving or closing the web page

b) To clear local storage data asynchronously

c) To reload stylesheets prior to rendering

d) To cancel pending network requests

Correct Answer: a) To prompt the user with a confirmation dialog before leaving or closing the web page

Explanation:

beforeunload lets developers warn users about unsaved changes before page destruction.

35. Which event fires on the window when the browser window is resized?

a) "resize"

b) "scale"

c) "dimensions"

d) "viewport"

Correct Answer: a) "resize"

Explanation:

The resize event fires continuously during window dimension changes, often requiring debouncing or throttling.

36. Which event fires when the user scrolls an element or the window?

a) "scroll"

b) "wheel"

c) "pan"

d) "drag"

Correct Answer: a) "scroll"

Explanation:

The scroll event triggers whenever document or element scroll positions change.

37. What is the difference between the `scroll` event and the `wheel` event?

a) scroll fires when the view position changes, whereas wheel fires when the user rotates the mouse wheel regardless of whether scrolling actually occurs.

b) wheel only works on touch devices.

c) scroll is synchronous, while wheel is asynchronous.

d) They are identical.

Correct Answer: a) scroll fires when the view position changes, whereas wheel fires when the user rotates the mouse wheel regardless of whether scrolling actually occurs.

Explanation:

Wheel detects mouse wheel physical rotation input, while scroll detects actual displacement.

38. What does `event.cancelable` indicate?

a) A boolean indicating whether the event can have its default action prevented using `event.preventDefault()`.

b) Whether the event listener can be deleted.

c) Whether the event supports bubbling.

d) Whether the event was triggered by a user.

Correct Answer: a) A boolean indicating whether the event can have its default action prevented using `event.preventDefault()`.

Explanation:

Not all events are cancelable (e.g., scroll is cancelable in some contexts, but load is not).

39. What does `event.timeStamp` provide?

a) A high-precision timestamp indicating when the event was created relative to time origin

b) The exact calendar date string

c) The duration of event bubbling in milliseconds

d) The network latency time

Correct Answer: a) A high-precision timestamp indicating when the event was created relative to time origin

Explanation:

timeStamp measures milliseconds elapsed since performance time origin when the event occurred.

40. How can you check if the Shift key was held down during a mouse click event?

a) event.shiftKey

b) event.modifiers.shift

c) event.key === "Shift"

d) event.withShift

Correct Answer: a) event.shiftKey

Explanation:

Modifier properties like shiftKey, altKey, ctrlKey, and metaKey indicate modifier states during mouse or keyboard events.

41. Which property on a mouse event object gives the horizontal coordinate relative to the entire client viewport?

a) event.clientX

b) event.pageX

c) event.screenX

d) event.offsetX

Correct Answer: a) event.clientX

Explanation:

clientX and clientY provide coordinates relative to the browser client area viewport.

42. Which property gives mouse coordinates relative to the total rendered document page, including scrolled areas?

a) event.pageX

b) event.clientX

c) event.screenX

d) event.layerX

Correct Answer: a) event.pageX

Explanation:

pageX and pageY include document scroll offsets relative to top-left of the document.

43. What does `event.button` specify on a mouse click event?

a) An integer representing which mouse button was pressed (0 for primary/left, 1 for middle, 2 for right).

b) The total number of buttons on the mouse.

c) The HTML button element ID.

d) The click count.

Correct Answer: a) An integer representing which mouse button was pressed (0 for primary/left, 1 for middle, 2 for right).

Explanation:

event.button identifies specific mouse button presses.

44. What does `event.detail` represent on a click event?

a) The click count (e.g., 1 for single click, 2 for double click, 3 for triple click).

b) Detailed error logs.

c) Custom payload objects.

d) Pointer pressure.

Correct Answer: a) The click count (e.g., 1 for single click, 2 for double click, 3 for triple click).

Explanation:

detail indicates how many times the click event was repeated sequentially.

45. What is memory leak risk associated with unremoved event listeners in single-page applications?

a) DOM elements removed from the page can remain in memory if event listeners still reference them, preventing garbage collection.

b) Event listeners consume CPU cycles even when idle.

c) Event queues overflow and crash the browser.

d) CSS styles become corrupted.

Correct Answer: a) DOM elements removed from the page can remain in memory if event listeners still reference them, preventing garbage collection.

Explanation:

Lingering event listener references prevent V8 garbage collector from reclaiming detached DOM nodes.

46. What is the order of execution when both capturing and bubbling listeners are attached for the same event on target and parent elements?

a) Capturing phase runs from root down to target, then Target phase runs, then Bubbling phase runs from target back up to root.

b) Bubbling always runs before capturing.

c) All listeners execute simultaneously.

d) Target listeners run first, followed by random order.

Correct Answer: a) Capturing phase runs from root down to target, then Target phase runs, then Bubbling phase runs from target back up to root.

Explanation:

The DOM event flow strictly mandates Capture -> Target -> Bubble sequence.

47. Can an event listener be attached to the `document` or `window` object?

a) Yes, global objects like document and window support addEventListener for global events like clicks, keypresses, or scrolling.

b) No, event listeners can only be attached to HTMLElement instances.

c) Only document supports listeners, not window.

d) Only in Node.js environments.

Correct Answer: a) Yes, global objects like document and window support addEventListener for global events like clicks, keypresses, or scrolling.

Explanation:

Attaching listeners to document or window enables global event delegation and monitoring.

48. What is the purpose of `element.matches(selector)` in event delegation?

a) To check if an element matches a specific CSS selector string, helping verify target nodes in delegation handlers.

b) To compare two event objects for equality.

c) To validate password regex formats.

d) To match CSS stylesheets with HTML tags.

Correct Answer: a) To check if an element matches a specific CSS selector string, helping verify target nodes in delegation handlers.

Explanation:

matches() tests if `event.target` corresponds to the expected child selector during delegation.

49. What is the purpose of `element.closest(selector)` in event delegation?

a) It traverses the element and its ancestors upward until it finds a node matching the specified CSS selector.

b) It finds the closest sibling element.

c) It calculates pixel distance between two mouse coordinates.

d) It returns the parent element without selectors.

Correct Answer: a) It traverses the element and its ancestors upward until it finds a node matching the specified CSS selector.

Explanation:

closest() is invaluable in event delegation when clicks occur on nested child elements inside a target container.

50. What happens if you trigger an event using `element.click()` programmatically?

a) It simulates a mouse click on the element, triggering associated event listeners and default actions synchronously.

b) It opens a new browser tab.

c) It throws a security error.

d) It only fires capturing listeners.

Correct Answer: a) It simulates a mouse click on the element, triggering associated event listeners and default actions synchronously.

Explanation:

Programmatic click invocation executes event handlers and default behaviors just like a physical click.

51. How do pointer events (`pointerdown`, `pointermove`, `pointerup`) differ from traditional mouse/touch events?

a) Pointer events provide a unified hardware-agnostic model supporting mouse, pen/stylus, and touch interactions through a single API.

b) Pointer events only work for touchscreen devices.

c) Pointer events do not support bubbling.

d) Pointer events are deprecated in modern browsers.

Correct Answer: a) Pointer events provide a unified hardware-agnostic model supporting mouse, pen/stylus, and touch interactions through a single API.

Explanation:

Pointer events simplify cross-device development by unifying mouse, touch, and stylus input streams.

52. What does `event.pointerId` identify in pointer events?

a) A unique identifier for the specific pointer interaction (useful for multi-touch tracking).

b) The hardware MAC address of the mouse.

c) The DOM node index.

d) The pixel screen resolution.

Correct Answer: a) A unique identifier for the specific pointer interaction (useful for multi-touch tracking).

Explanation:

pointerId distinguishes simultaneous contact points in multi-touch or multi-stylus environments.

53. Which touch event property contains a list of all current active touch points on the screen?

a) event.touches

b) event.activeTouches

c) event.targetTouches

d) event.allTouches

Correct Answer: a) event.touches

Explanation:

event.touches lists all active touch points across the entire screen regardless of target.

54. What does `event.targetTouches` contain?

a) A list of active touch points that started on the current DOM element target.

b) All touches on the screen.

c) Touches that have ended.

d) Mouse coordinates.

Correct Answer: a) A list of active touch points that started on the current DOM element target.

Explanation:

targetTouches filters touches originating specifically on the target element.

55. What does `event.changedTouches` represent?

a) A list of touch points that contributed to the current touch event state change (e.g., touches that just lifted or moved).

b) Touches that changed color.

c) Previous touch coordinates.

d) Keyboard modifiers.

Correct Answer: a) A list of touch points that contributed to the current touch event state change (e.g., touches that just lifted or moved).

Explanation:

changedTouches is essential for touchend events where `touches` list is empty.

56. What is drag and drop event flow in HTML5?

a) A sequence of events including dragstart, drag, dragenter, dragover, dragleave, drop, and dragend.

b) Clicking and dragging files without event objects.

c) Automatically handled by CSS without JavaScript.

d) Restricted exclusively to image elements.

Correct Answer: a) A sequence of events including dragstart, drag, dragenter, dragover, dragleave, drop, and dragend.

Explanation:

HTML5 Drag and Drop API relies on specific source and target events to manage data transfer.

57. Why is calling `event.preventDefault()` required inside a `dragover` event handler to enable dropping?

a) Because elements do not allow dropping by default; preventing default signals that the drop target is valid.

b) To stop drag event bubbling.

c) To clear drag data payload.

d) It is not required; dropping is enabled by default.

Correct Answer: a) Because elements do not allow dropping by default; preventing default signals that the drop target is valid.

Explanation:

Browsers reject drops by default unless preventDefault is invoked on dragover.

58. What object is used to transfer data during drag and drop operations?

a) event.dataTransfer

b) event.payload

c) event.transferData

d) event.clipboardData

Correct Answer: a) event.dataTransfer

Explanation:

dataTransfer holds data being dragged (via setData and getData methods).

59. Which event fires on an input element when the user selects or highlights text inside it?

a) "select"

b) "highlight"

c) "copy"

d) "focus"

Correct Answer: a) "select"

Explanation:

The select event fires when input or textarea text is highlighted by the user.

60. Which event fires when data is copied to the system clipboard?

a) "copy"

b) "cut"

c) "paste"

d) "clipboard"

Correct Answer: a) "copy"

Explanation:

The copy event fires when a copy action is initiated, allowing inspection or modification via `event.clipboardData`.

61. Which event fires when an image or media element fails to load successfully?

a) "error"

b) "fail"

c) "abort"

d) "missing"

Correct Answer: a) "error"

Explanation:

The error event triggers when resources fail to load (e.g., broken image URLs).

62. Which event fires when media loading is aborted or stopped prematurely?

a) "abort"

b) "cancel"

c) "stop"

d) "pause"

Correct Answer: a) "abort"

Explanation:

The abort event fires when resource loading is aborted before completion.

63. What is event bubbling cancellation pitfall ('silent failures')?

a) Indiscriminately calling stopPropagation() can break parent components or analytics trackers that rely on bubbling events, leading to hard-to-debug UI bugs.

b) It causes browser memory leaks.

c) It deletes event listeners automatically.

d) It disables CSS animations.

Correct Answer: a) Indiscriminately calling stopPropagation() can break parent components or analytics trackers that rely on bubbling events, leading to hard-to-debug UI bugs.

Explanation:

Overusing stopPropagation interferes with global listeners (like modals closing on outside clicks or telemetry).

64. How do Shadow DOM event retargeting rules affect `event.target`?

a) To maintain encapsulation, the browser retargets event.target so that events originating inside a shadow tree appear to target the host element when viewed from outside.

b) It blocks all events from escaping the shadow root.

c) It converts event targets into strings.

d) It makes event targets null.

Correct Answer: a) To maintain encapsulation, the browser retargets event.target so that events originating inside a shadow tree appear to target the host element when viewed from outside.

Explanation:

Retargeting hides internal shadow DOM implementation details from external listeners.

65. What is the role of `event.composed` in custom events?

a) A boolean indicating whether the custom event can bubble across Shadow DOM boundaries into the light DOM.

b) Whether the event can be cancelled.

c) Whether the event is trusted.

d) Whether the event is asynchronous.

Correct Answer: a) A boolean indicating whether the custom event can bubble across Shadow DOM boundaries into the light DOM.

Explanation:

Setting `composed: true` allows custom events to cross shadow boundaries.

66. How does event handling interact with the JavaScript event loop (microtasks vs macrotasks)?

a) Event listener callbacks execute as macrotasks when triggered, and any microtasks (like Promise `.then()`) spawned inside them run immediately after the handler finishes before rendering.

b) Event handlers run as microtasks.

c) Event handlers bypass the event loop entirely.

d) Event handlers execute in background Web Worker threads.

Correct Answer: a) Event listener callbacks execute as macrotasks when triggered, and any microtasks (like Promise `.then()`) spawned inside them run immediately after the handler finishes before rendering.

Explanation:

Event callbacks are task queue callbacks that process microtask checkpoints upon completion.

67. What is the purpose of `queueMicrotask()` inside an event handler?

a) To enqueue a microtask function to execute after the current handler finishes and before control returns to the event loop/rendering engine.

b) To delay execution by 1000ms.

c) To create a Web Worker.

d) To stop event bubbling.

Correct Answer: a) To enqueue a microtask function to execute after the current handler finishes and before control returns to the event loop/rendering engine.

Explanation:

queueMicrotask schedules cleanups or state synchronization before the next paint.

68. Which method on an event object allows marking an event as handled in older legacy Internet Explorer compatibility code?

a) event.cancelBubble = true

b) event.stopPropagation()

c) event.halt()

d) event.prevent()

Correct Answer: a) event.cancelBubble = true

Explanation:

Legacy IE used `cancelBubble = true` instead of `stopPropagation()`.

69. Which legacy property was used in old IE to prevent default actions instead of preventDefault()?

a) event.returnValue = false

b) event.defaultPrevented = true

c) event.cancelAction = true

d) event.stopDefault()

Correct Answer: a) event.returnValue = false

Explanation:

In older IE versions, setting `returnValue = false` canceled default browser behavior.

70. What does `event.defaultPrevented` return?

a) A boolean indicating whether `event.preventDefault()` has already been called on the event object.

b) Whether the event is cancelable.

c) Whether event propagation was stopped.

d) Whether the event listener is active.

Correct Answer: a) A boolean indicating whether `event.preventDefault()` has already been called on the event object.

Explanation:

defaultPrevented allows other code blocks to check if a previous handler already cancelled the default action.

71. Which event fires when an HTML `` element is closed?

a) "close"

b) "dismiss"

c) "hide"

d) "exit"

Correct Answer: a) "close"

Explanation:

The close event fires on dialog elements when closed via `.close()` or form method dialog.

72. Which event fires when a user toggles an `` element open or closed?

a) "toggle"

b) "change"

c) "switch"

d) "expand"

Correct Answer: a) "toggle"

Explanation:

The toggle event fires on details elements when their open attribute changes state.

73. Which event fires on input elements when validation fails during form submission constraint checking?

a) "invalid"

b) "error"

c) "reject"

d) "fail"

Correct Answer: a) "invalid"

Explanation:

The invalid event fires when a form element fails constraint validation.

74. Which event fires when a user pastes content from the clipboard into an input or editable area?

a) "paste"

b) "drop"

c) "insert"

d) "input"

Correct Answer: a) "paste"

Explanation:

The paste event fires during clipboard paste actions, allowing access to `event.clipboardData`.

75. What is the primary benefit of passive event listeners in mobile web development?

a) Eliminating scroll stutter and touch delay by ensuring the browser scrolls immediately without waiting for JavaScript execution.

b) Doubling battery life.

c) Increasing touch sensitivity.

d) Disabling pinch zoom.

Correct Answer: a) Eliminating scroll stutter and touch delay by ensuring the browser scrolls immediately without waiting for JavaScript execution.

Explanation:

Passive listeners prevent touch/wheel event thread blocking.

76. How can you check if event listener options like `{ once: true }` are supported by the user's browser without throwing errors?

a) By using a feature-detection getter object with addEventListener ("passive" or "once" getter in options object).

b) By checking `navigator.userAgent`.

c) By using try...catch around window.addEvent.

d) Feature detection is unnecessary in modern browsers.

Correct Answer: a) By using a feature-detection getter object with addEventListener ("passive" or "once" getter in options object).

Explanation:

Feature detection ensures older browsers don't break when passing object option dictionaries to addEventListener.

77. What does `event.isComposing` indicate in keyboard or input events?

a) Whether the event occurs as part of an IME (Input Method Editor) composition session for characters like Chinese, Japanese, or Korean.

b) Whether the keyboard is wireless.

c) Whether the event is composed across shadow DOM.

d) Whether text is being spellchecked.

Correct Answer: a) Whether the event occurs as part of an IME (Input Method Editor) composition session for characters like Chinese, Japanese, or Korean.

Explanation:

isComposing helps handle multi-step keystroke compositions correctly.

78. Which event fires when an element gains focus?

a) "focus"

b) "active"

c) "select"

d) "hover"

Correct Answer: a) "focus"

Explanation:

The focus event fires when an element receives focus (does not bubble).

79. What is the difference between `element.focus()` and setting focus via tabindex?

a) element.focus() is a programmatic method to apply focus, whereas tabindex makes non-focusable elements eligible for keyboard focus and tab navigation.

b) tabindex is a JavaScript function.

c) element.focus() works only in strict mode.

d) There is no difference.

Correct Answer: a) element.focus() is a programmatic method to apply focus, whereas tabindex makes non-focusable elements eligible for keyboard focus and tab navigation.

Explanation:

tabindex configures focus eligibility, while focus() triggers it programmatically.

80. Which event fires on video or audio media elements when playback reaches the end?

a) "ended"

b) "finish"

c) "complete"

d) "stop"

Correct Answer: a) "ended"

Explanation:

The ended event fires when media playback completes.

81. Which event fires on media elements when playback is paused?

a) "pause"

b) "stop"

c) "wait"

d) "freeze"

Correct Answer: a) "pause"

Explanation:

The pause event fires when media playback is paused.

82. Which event fires when media elements begin playing?

a) "play"

b) "start"

c) "resume"

d) "begin"

Correct Answer: a) "play"

Explanation:

The play event fires when the ready state indicates playback has started.

83. What does `event.target.value` return inside an input event handler for a text field?

a) The current string value inside the input field.

b) The HTML tag name.

c) The cursor position integer.

d) The placeholder text.

Correct Answer: a) The current string value inside the input field.

Explanation:

target.value accesses the live text content of form input fields.

84. How can you prevent a form from performing its default page reload behavior upon submission in JavaScript?

a) By calling `event.preventDefault()` inside the form's "submit" event handler.

b) By returning true from the handler.

c) By removing the form action attribute.

d) By calling `event.stopPropagation()`.

Correct Answer: a) By calling `event.preventDefault()` inside the form's "submit" event handler.

Explanation:

preventDefault stops the browser from submitting the form traditionally, enabling AJAX/Fetch submissions.

85. What is the primary architectural advantage of event-driven programming in JavaScript UIs?

a) It decouples UI components from asynchronous user interactions, allowing non-blocking, responsive applications.

b) It eliminates the need for CSS styling.

c) It forces synchronous multi-threading.

d) It compresses HTML payload sizes.

Correct Answer: a) It decouples UI components from asynchronous user interactions, allowing non-blocking, responsive applications.

Explanation:

Event-driven architecture underpins interactive web applications by listening and reacting to asynchronous user inputs.

Ads Blocker Detected!!!

1. Which method is the standard and recommended way to attach an event handler to a DOM element in modern JavaScript?

2. What is the primary difference between addEventListener and legacy inline event handlers (e.g., element.onclick)?

3. What are the three phases of event propagation in the DOM event flow?

4. During which phase of event propagation do event listeners with the capture option set to `true` execute?

5. What does event bubbling refer to?

6. Which method stops the propagation of an event further along the DOM tree (preventing bubbling or capturing)?

7. What does event.stopImmediatePropagation() do beyond what event.stopPropagation() does?

8. What is the purpose of event.preventDefault()?

9. What is event delegation?

10. What is the difference between `event.target` and `event.currentTarget` inside an event handler?

11. How does the `this` keyword behave inside a standard regular function used as an event listener?

12. How does `this` behave inside an arrow function used as an event listener?

13. Which method is used to remove an event listener previously attached with addEventListener?

14. Why might `element.removeEventListener()` fail to remove a listener if passed an anonymous function?

15. What is the purpose of the `{ once: true }` option in addEventListener?

16. What does the `{ passive: true }` option signal to the browser in event listeners?

17. How can you remove multiple event listeners simultaneously using an AbortController?

18. How do you create and dispatch a custom event in JavaScript?

19. What is the difference between the `DOMContentLoaded` event and the `load` event on the window object?

20. Which event fires when an HTML form is submitted?

21. What is the difference between the `input` event and the `change` event on input/textarea elements?

22. Which keyboard event property indicates the physical key pressed, regardless of keyboard layout or modifier keys?

23. Which keyboard event property represents the character value printed by the key press?

24. What is debouncing in the context of high-frequency events like window resizing or scrolling?

25. What is throttling in event handling?

26. What does `event.composedPath()` return?

27. What is the purpose of `event.isTrusted`?

28. Which mouse event fires when the pointer enters an element, without bubbling to descendant child elements?

29. Which mouse event bubbles and fires when the pointer enters an element or any of its descendants?

30. What is the difference between `click` and `dblclick` events?

31. What does the `contextmenu` event represent?

32. Which event fires when an element loses focus?

33. Which focus-related event bubbles up the DOM tree, unlike its non-bubbling counterpart?

34. What is the `beforeunload` event used for?

35. Which event fires on the window when the browser window is resized?

36. Which event fires when the user scrolls an element or the window?

37. What is the difference between the `scroll` event and the `wheel` event?

38. What does `event.cancelable` indicate?

39. What does `event.timeStamp` provide?

40. How can you check if the Shift key was held down during a mouse click event?

41. Which property on a mouse event object gives the horizontal coordinate relative to the entire client viewport?

42. Which property gives mouse coordinates relative to the total rendered document page, including scrolled areas?

43. What does `event.button` specify on a mouse click event?

44. What does `event.detail` represent on a click event?

45. What is memory leak risk associated with unremoved event listeners in single-page applications?

46. What is the order of execution when both capturing and bubbling listeners are attached for the same event on target and parent elements?

47. Can an event listener be attached to the `document` or `window` object?

48. What is the purpose of `element.matches(selector)` in event delegation?

49. What is the purpose of `element.closest(selector)` in event delegation?

50. What happens if you trigger an event using `element.click()` programmatically?

51. How do pointer events (`pointerdown`, `pointermove`, `pointerup`) differ from traditional mouse/touch events?

52. What does `event.pointerId` identify in pointer events?

53. Which touch event property contains a list of all current active touch points on the screen?

54. What does `event.targetTouches` contain?

55. What does `event.changedTouches` represent?

56. What is drag and drop event flow in HTML5?

57. Why is calling `event.preventDefault()` required inside a `dragover` event handler to enable dropping?

58. What object is used to transfer data during drag and drop operations?

59. Which event fires on an input element when the user selects or highlights text inside it?

60. Which event fires when data is copied to the system clipboard?

61. Which event fires when an image or media element fails to load successfully?

62. Which event fires when media loading is aborted or stopped prematurely?

63. What is event bubbling cancellation pitfall ('silent failures')?

64. How do Shadow DOM event retargeting rules affect `event.target`?

65. What is the role of `event.composed` in custom events?

66. How does event handling interact with the JavaScript event loop (microtasks vs macrotasks)?

67. What is the purpose of `queueMicrotask()` inside an event handler?

68. Which method on an event object allows marking an event as handled in older legacy Internet Explorer compatibility code?

69. Which legacy property was used in old IE to prevent default actions instead of preventDefault()?

70. What does `event.defaultPrevented` return?

71. Which event fires when an HTML `` element is closed?

72. Which event fires when a user toggles an `` element open or closed?

73. Which event fires on input elements when validation fails during form submission constraint checking?

74. Which event fires when a user pastes content from the clipboard into an input or editable area?

75. What is the primary benefit of passive event listeners in mobile web development?

76. How can you check if event listener options like `{ once: true }` are supported by the user's browser without throwing errors?

77. What does `event.isComposing` indicate in keyboard or input events?

78. Which event fires when an element gains focus?