JavaScript Event Handling Quiz: Test Your Knowledge of Events

📚 Quick Study Guide

• 💡 Event: A specific action or occurrence that happens in the browser, such as a user clicking a button, a page loading, or an input field changing.
• ✍️ Event Handler: A JavaScript function that is executed when a particular event occurs on an element.
• 👂 Event Listener: A mechanism (e.g., addEventListener()) used to register a function that will be called when a specific event fires on an element.
• ✅ addEventListener(): The modern and recommended method for attaching event handlers. It allows multiple handlers for the same event type on a single element and offers more control (e.g., capturing phase).
• ℹ️ Event Object: An object automatically passed to the event handler function, containing crucial information about the event that just occurred (e.g., target, type, coordinates).
• 🚫 event.preventDefault(): A method of the event object that stops the browser's default action associated with an event (e.g., preventing a form submission or a link navigation).
• 🛑 event.stopPropagation(): A method that prevents the event from propagating further up (bubbling) or down (capturing) the DOM tree, stopping other elements from receiving the event.
• ⬆️ Event Bubbling: The default phase of event propagation where an event first triggers on the target element and then "bubbles up" through its ancestors to the document object.
• ⬇️ Event Capturing: The opposite of bubbling; the event first propagates from the document down to the target element before bubbling up. Can be enabled by setting the third argument of addEventListener() to true or { capture: true }.
• 🔗 Event Delegation: An efficient technique where a single event listener is attached to a parent element, and it listens for events on its descendants, leveraging event bubbling.

🧠 Practice Quiz

1. Which method is the recommended way to attach an event handler to an element in JavaScript?

   A) onclick = handlerFunction

   B) attachEvent()

   C) addEventListener()

   D) on('click', handlerFunction)

2. What does event.preventDefault() do?

   A) Stops the event from propagating further up the DOM tree.

   B) Prevents the default action of the event from occurring.

   C) Stops all other event listeners from firing.

   D) Pauses the execution of the JavaScript code.

3. In event bubbling, which element receives the event first?

   A) The document object.

   B) The window object.

   C) The target element where the event originated.

   D) The body element.

4. Which property of the event object refers to the element that triggered the event?

   A) event.currentTarget

   B) event.target

   C) event.srcElement

   D) event.origin

5. What is the primary benefit of using event delegation?

   A) It makes event handlers execute faster.

   B) It allows for direct manipulation of the window object.

   C) It reduces memory usage by attaching fewer event listeners.

   D) It prevents all default browser actions.

6. When addEventListener() is used with its third argument set to true (or an object { capture: true }), what phase of event propagation is enabled?

   A) Event bubbling.

   B) Event delegation.

   C) Event capturing.

   D) Event propagation.

7. If you want to stop an event from propagating up to its parent elements, which method would you use?

   A) event.stopImmediatePropagation()

   B) event.cancelBubble()

   C) event.stopPropagation()

   D) event.haltPropagation()