MCQs on Advanced Event Handling and Custom Events | JavaScript Advanced

Chapter 23 of this guide delves into advanced concepts in event handling. Strengthen your understanding of custom events, event propagation, debouncing, throttling, and memory leaks through these targeted multiple-choice questions.

Custom Events and Dispatching Events (8 MCQs)

1. Which method is used to create a custom event in JavaScript?
   a) createEvent()
   b) dispatchEvent()
   c) CustomEvent()
   d) generateEvent()
2. What is the main purpose of dispatching a custom event?
   a) To modify existing DOM elements
   b) To send specific event data and trigger listeners
   c) To debug application logic
   d) To handle asynchronous calls
3. What property in the CustomEvent constructor is used to pass custom data?
   a) data
   b) detail
   c) payload
   d) content
4. Which of the following is true about CustomEvent in JavaScript?
   a) It cannot bubble by default.
   b) It requires an external library to work.
   c) It is only supported in Node.js.
   d) It can propagate if specified.
5. What method is used to dispatch a custom event?
   a) sendEvent()
   b) dispatchCustom()
   c) triggerEvent()
   d) dispatchEvent()
6. When creating a CustomEvent, which value does bubbles default to if not specified?
   a) false
   b) true
   c) undefined
   d) null
7. How do you listen for a custom event in JavaScript?
   a) document.on()
   b) addEventListener()
   c) catchEvent()
   d) listenTo()
8. Can custom events carry custom data?
   a) Yes, using the detail property.
   b) No, custom data cannot be included.
   c) Yes, using the payload property.
   d) Yes, by modifying the eventType.

Event Propagation and Event Object (8 MCQs)

9. What are the three phases of event propagation in JavaScript?
   a) Capturing, Bubbling, Termination
   b) Capturing, Target, Bubbling
   c) Initializing, Bubbling, Stopping
   d) Sending, Receiving, Propagating
10. Which method prevents further propagation of an event?
    a) stopPropagation()
    b) preventDefault()
    c) cancelEvent()
    d) terminateEvent()
11. What does the event.target property represent?
    a) The element where the event listener is attached
    b) The element that triggered the event
    c) The type of event being dispatched
    d) The default action prevented by the event
12. What is the difference between event.target and event.currentTarget?
    a) target refers to the triggering element, and currentTarget refers to the element handling the event.
    b) target and currentTarget are interchangeable.
    c) target is specific to custom events, while currentTarget applies to all events.
    d) Both refer to the same element in the event loop.
13. How can you stop both the propagation and default behavior of an event?
    a) Use stopPropagation() and preventDefault() together.
    b) Use cancelEvent().
    c) Set event.stopAll to true.
    d) It is not possible.
14. When is the capturing phase of event propagation executed?
    a) After the target phase
    b) Before the target phase
    c) After the bubbling phase
    d) Simultaneously with the bubbling phase
15. How can event delegation improve performance?
    a) By attaching event listeners only to the target elements
    b) By reducing the number of event listeners through parent delegation
    c) By preventing event propagation entirely
    d) By combining capturing and bubbling phases
16. Which property of the event object indicates if an event is cancelable?
    a) isCancel
    b) cancelable
    c) canCancel
    d) cancel

Debouncing and Throttling (8 MCQs)

17. What is the main purpose of debouncing?
    a) To delay function execution until after frequent events stop firing
    b) To execute a function at regular intervals
    c) To prioritize event listeners
    d) To prevent memory leaks in event handling
18. Which scenario is best suited for using throttling?
    a) Validating form inputs in real time
    b) Logging scroll events at fixed intervals
    c) Preventing double clicks on a button
    d) Handling keypress events
19. What parameter does a typical debounce function accept?
    a) Function, wait time
    b) Function, execution count
    c) Wait time, interval
    d) Event type, interval
20. How does throttling differ from debouncing?
    a) Throttling ensures execution at intervals, while debouncing delays execution until inactivity.
    b) Throttling prevents all events from triggering, debouncing executes immediately.
    c) Throttling and debouncing are identical.
    d) Debouncing is event-specific; throttling is not.
21. What is a common use case for debouncing?
    a) Handling click events
    b) Logging API calls
    c) Search input auto-suggestions
    d) Animating UI components
22. Which utility library provides functions for debouncing and throttling?
    a) Lodash
    b) jQuery
    c) Axios
    d) React
23. What happens if the debounce timer expires?
    a) The function is called immediately.
    b) The function is discarded.
    c) The timer resets.
    d) No action is taken.
24. How is throttling implemented in JavaScript?
    a) By wrapping the function with a setTimeout-based logic
    b) By using event.preventDefault()
    c) By modifying the event propagation phases
    d) By listening to events on a timer

Memory Leaks in Event Handling (6 MCQs)

25. What can lead to memory leaks in event handling?
    a) Improper removal of event listeners
    b) Using too many inline event handlers
    c) Using capturing phase exclusively
    d) Using addEventListener instead of onEvent
26. What does the removeEventListener() method do?
    a) Stops the event from bubbling
    b) Removes an event listener to prevent memory leaks
    c) Prevents event delegation
    d) Blocks future event listeners from being added
27. How can memory leaks in event listeners affect application performance?
    a) They reduce DOM element accessibility.
    b) They increase the memory consumption unnecessarily.
    c) They only impact server-side logic.
    d) They disable custom event dispatching.
28. Which of these is a preventive measure against memory leaks in event handling?
    a) Avoid using inline event handlers.
    b) Use named functions for event listeners.
    c) Use weak references for events.
    d) All of the above.
29. Why is it important to clean up event listeners in single-page applications (SPAs)?
    a) To prevent function overloading
    b) To avoid memory bloat and ensure smooth navigation
    c) To allow immediate re-rendering of the page
    d) To maintain the order of event propagation
30. What tool is commonly used to detect memory leaks in event handling?
    a) Chrome DevTools
    b) Visual Studio Code
    c) API Gateway
    d) React Profiler

Answer Key