MCQs on Events and Event Handling | JavaScript Intermediate

Master JavaScript Events and Event Handling for Dynamic Web Interactivity: Enhance your web development skills by learning about event listeners, bubbling, capturing, default behavior prevention, and event delegation to handle user interactions efficiently.

---

Event Listeners and Event Types (8 MCQs)

1. What is an event listener in JavaScript?
   • A) A function that listens for a specified event on a target element
   • B) A function that executes automatically when the page loads
   • C) A global function that handles all events
   • D) A built-in JavaScript method for handling errors
2. Which method is used to add an event listener to an element?
   • A) addListener()
   • B) attachEvent()
   • C) addEventListener()
   • D) onEvent()
3. Which of the following is a valid event type?
   • A) click
   • B) hover
   • C) animate
   • D) focusin
4. Which event type is triggered when a user clicks on an element?
   • A) keydown
   • B) mousedown
   • C) click
   • D) dblclick
5. What is the syntax to remove an event listener in JavaScript?
   • A) element.removeEventListener(eventType, listener)
   • B) element.removeListener(eventType, listener)
   • C) element.detachEvent(eventType, listener)
   • D) element.remove(eventType)
6. What is the difference between addEventListener and the onEvent attribute in HTML?
   • A) addEventListener is used for multiple event listeners, while onEvent is for one-time events
   • B) addEventListener is for legacy browsers
   • C) There is no difference
   • D) onEvent is used for non-browser environments
7. Which event is triggered when a user presses a key on the keyboard?
   • A) keypress
   • B) keydown
   • C) keyup
   • D) input
8. How would you prevent the default action of an event?
   • A) event.stopPropagation()
   • B) event.preventDefault()
   • C) event.cancel()
   • D) event.ignore()

---

Event Bubbling and Capturing (8 MCQs)

9. What is event bubbling in JavaScript?
   • A) Events propagate from the outermost to the innermost element
   • B) Events propagate from the innermost to the outermost element
   • C) Events do not propagate in event bubbling
   • D) Events propagate simultaneously
10. What is event capturing in JavaScript?

• A) Events propagate from the outermost to the innermost element
• B) Events propagate from the innermost to the outermost element
• C) Events are captured by the innermost element first
• D) Events do not propagate in event capturing

11. What method is used to stop an event from bubbling up to parent elements?

• A) event.stopPropagation()
• B) event.preventDefault()
• C) event.cancelBubble()
• D) event.stopEvent()

12. What happens when an event is captured during event capturing?

• A) The event is handled by the innermost element first
• B) The event is handled by the outermost element first
• C) The event is handled by all elements at the same time
• D) The event is ignored

13. How do you specify whether an event listener should use capturing or bubbling?

• A) By passing a boolean value as the third argument to addEventListener()
• B) By using the useCapture property
• C) By using event.capture()
• D) Both A and B

14. Which of the following is the default phase for most event listeners?

• A) Bubbling phase
• B) Capturing phase
• C) Neither phase
• D) Both phases

15. How can you set the event listener to trigger during the capturing phase?

• A) addEventListener(eventType, listener, true)
• B) addEventListener(eventType, listener, false)
• C) addEventListener(eventType, listener)
• D) element.captureEvent()

16. Which of the following statements is true about event propagation?

• A) Bubbling and capturing are two phases of event propagation
• B) Bubbling occurs before capturing
• C) Capturing events are handled after the target event
• D) Both phases always occur together

---

Preventing Default Behavior (8 MCQs)

17. What does event.preventDefault() do?

• A) It stops the event from propagating
• B) It prevents the default action associated with the event
• C) It stops event capturing
• D) It prevents the event from being executed

18. Which of the following scenarios would require using event.preventDefault()?

• A) Preventing the default behavior of a submit button
• B) Preventing a keypress event
• C) Preventing a mouseover event
• D) Preventing a click event

19. What is the default behavior when submitting a form in HTML?

• A) The page reloads
• B) The form values are logged to the console
• C) The form values are sent to the server
• D) The form resets itself

20. How would you prevent the default behavior of a submit button inside a form?

• A) event.preventDefault() inside the submit event handler
• B) return false in the submit event handler
• C) Both A and B
• D) Neither A nor B

21. How does the return false statement affect event handling in JavaScript?

• A) It prevents both the default action and event propagation
• B) It prevents the default action but allows event propagation
• C) It prevents event propagation but not the default action
• D) It has no effect on event handling

22. What happens if you don’t use event.preventDefault() in an anchor (<a>) tag with a href attribute?

• A) The page doesn’t navigate
• B) The page navigates to the specified URL
• C) The browser opens a new tab
• D) The event is cancelled

23. In which situation would event.preventDefault() NOT be used?

• A) When submitting a form asynchronously
• B) When handling a click event for a custom action
• C) When preventing a page navigation for a link
• D) When logging an error

24. Can event.preventDefault() be used on all events?

• A) Yes, on all events
• B) No, only on form-related events
• C) No, only on mouse events
• D) No, only on keyboard events

---

Event Delegation (6 MCQs)

25. What is event delegation in JavaScript?

• A) A technique for using a single event listener to manage events on multiple elements
• B) A method for handling events only on the target element
• C) A method for grouping all event listeners into a single function
• D) A technique for binding multiple event handlers to one element

26. What is the main benefit of using event delegation?

• A) It reduces memory usage by reducing the number of event listeners
• B) It increases performance by handling all events on the document
• C) It ensures that events are handled only on target elements
• D) Both A and B

27. How does event delegation work in JavaScript?

• A) It listens for events on a parent element and checks if the event target matches the desired element
• B) It attaches listeners to each child element individually
• C) It prevents event bubbling entirely
• D) It works only on input elements

28. When should you use event delegation?

• A) When dealing with dynamically added elements
• B) When dealing with a small number of elements
• C) When working with non-interactive elements
• D) When you want to handle only one specific event type

29. Which of the following is a proper way to implement event delegation?

• A) Adding an event listener to each individual list item
• B) Adding an event listener to the parent element and checking the target
• C) Using document.addEventListener() for all elements
• D) Using window.addEventListener() for all elements

30. What problem does event delegation solve?

• A) Handling events on dynamically created elements
• B) Preventing event listeners from being invoked
• C) Capturing events from multiple sources
• D) Simplifying event creation

---

Answers

Qno	Answer
1	A) A function that listens for a specified event on a target element
2	C) addEventListener()
3	A) click
4	C) click
5	A) element.removeEventListener(eventType, listener)
6	A) addEventListener is used for multiple event listeners, while onEvent is for one-time events
7	B) keydown
8	B) event.preventDefault()
9	A) Events propagate from the outermost to the innermost element
10	A) Events propagate from the outermost to the innermost element
11	A) event.stopPropagation()
12	B) The event is handled by the outermost element first
13	A) By passing a boolean value as the third argument to addEventListener()
14	A) Bubbling phase
15	A) addEventListener(eventType, listener, true)
16	A) Bubbling and capturing are two phases of event propagation
17	B) It prevents the default action associated with the event
18	A) Preventing the default behavior of a submit button
19	C) The form values are sent to the server
20	C) Both A and B
21	A) It prevents both the default action and event propagation
22	B) The page navigates to the specified URL
23	D) When logging an error
24	A) Yes, on all events
25	A) A technique for using a single event listener to manage events on multiple elements
26	D) Both A and B
27	A) It listens for events on a parent element and checks if the event target matches the desired element
28	A) When dealing with dynamically added elements
29	B) Adding an event listener to the parent element and checking the target
30	A) Handling events on dynamically created elements