DOM u0026 Event Handling Fundamentals Quiz Quiz

Test your knowledge of DOM manipulation, event bubbling and capturing, event delegation, and default actions. This quiz is designed to help you assess your understanding of core concepts and interactions in client-side web development.

1. DOM Structure Understanding

   Which node property refers to the immediate parent of a DOM element node?

   1. siblingNode
   2. childNode
   3. nodeAncestor
   4. parentNode

   Explanation: The parentNode property gives you the immediate parent of a DOM node, making it the correct answer. childNode refers to a child, not a parent. siblingNode is not a valid property in the DOM API. nodeAncestor is not an actual property; the term 'ancestor' might be used conceptually but not in code.

2. Event Bubbling Concept

   In event bubbling, what is the order in which event handlers are triggered in the DOM tree?

   1. From the target element, up through ancestors
   2. From the document root, down to the target
   3. Simultaneously on all elements
   4. In a random order

   Explanation: In event bubbling, the event starts at the target element and propagates upwards through its ancestors. The option 'From the document root, down to the target' describes event capturing, not bubbling. Simultaneous firing and random order do not occur in DOM event propagation processes.

3. Event Capturing Understanding

   During event capturing, where does the event propagation start?

   1. Only on the target element
   2. From the innermost ancestor outwards
   3. From the target element up to the document root
   4. From the document’s root towards the target element

   Explanation: Event capturing begins at the outermost ancestor (typically the document's root) and moves towards the target element. The reverse, from target up, describes bubbling. Firing only on the target element ignores capturing flow. 'Innermost ancestor outward' is a confusion between propagation phases.

4. Event Listener Default Phase

   When you add an event listener without specifying the useCapture parameter, which phase does it use by default?

   1. Bubbling phase
   2. Non-propagating
   3. Capturing phase
   4. Both phases

   Explanation: By default, event listeners are registered for the bubbling phase unless the useCapture parameter is set to true. Capturing phase is only used if specified. Both phases is not possible without extra handling. Non-propagating isn’t a standard DOM event behavior.

5. Preventing Default Actions

   Which method should you call on an event object to stop the default browser action, such as following a link?

   1. preventDefault()
   2. cancelBubble()
   3. stopDefault()
   4. stopPropagation()

   Explanation: The correct method to prevent default browser actions is preventDefault(). stopPropagation() halts event propagation but does not prevent default actions. cancelBubble() is a legacy property, and stopDefault() does not exist.

6. Stopping Event Propagation

   Which event object method stops the event from moving up or down the DOM tree?

   1. cancelDefault()
   2. haltEvent()
   3. stopPropagation()
   4. preventDefault()

   Explanation: stopPropagation() prevents the event from being further propagated in the capturing and bubbling phases. preventDefault() only prevents default behavior, not propagation. haltEvent() and cancelDefault() are not valid DOM event methods.

7. Event Delegation Scenario

   Why is event delegation useful when working with a long list of items that each require a click handler?

   1. It creates a copy of the handler for each item automatically
   2. It saves memory by adding one handler to a parent element
   3. It disables event bubbling on items
   4. It forces events to fire synchronously

   Explanation: Event delegation attaches a single event handler to a common ancestor, improving efficiency and memory usage. Forcing synchronous interaction is unrelated. Bubbling is used by delegation, not disabled. Automatically copying handlers contradicts the concept.

8. Target and CurrentTarget Properties

   Given a button inside a div, if both have click listeners, what does event.currentTarget refer to inside the event handler?

   1. The deepest element that triggered the event
   2. The document root
   3. The nearest ancestor element with a listener
   4. The element to which the event handler was attached

   Explanation: event.currentTarget always refers to the element that the handler is bound to, regardless of where the event originated. event.target refers to the deepest element. Nearest ancestor is ambiguous and not accurate. Document root is rarely relevant for specific handlers.

9. Removing Event Listeners

   Which action is required to remove an event listener from a DOM element?

   1. Assign null to the event property
   2. Delete the element’s parent node
   3. Call removeListener with the type only
   4. Call removeEventListener with the same type and handler

   Explanation: removeEventListener requires the exact same event type and handler function reference as when added. removeListener is not standard. Assigning null to event properties might work for inline listeners but not for addEventListener. Deleting the parent is unrelated to event listeners.

10. Event Object Usage

    Inside a DOM event handler, what does the event object typically represent?

    1. A string describing the event type
    2. The original DOM element only
    3. An object containing information about the event and related methods
    4. A collection of all event listeners

    Explanation: The event object includes data, such as type, target, and various methods. It is not just the DOM element, nor is it a simple string. It does not store all listeners; it pertains to the specific occurrence.

11. Order of Default Action and Handlers

    What happens if you both call preventDefault and stopPropagation on a click event on a link?

    1. The browser will not follow the link and the click does not bubble up
    2. Both are ignored and the event is processed normally
    3. Only default action stops; bubbling continues
    4. Only bubbling stops, but navigation proceeds

    Explanation: preventDefault prevents navigation (default behavior), while stopPropagation prevents event bubbling. Only stopping bubbling is incorrect because navigation would proceed. Only preventing default is incomplete, as bubbling would occur. Both being ignored contradicts correct API behavior.

12. Listening During Capturing

    How do you attach an event listener to fire during the capturing phase?

    1. Use a custom event object
    2. Use captureEvent() instead of addEventListener
    3. Attach the listener to the document root only
    4. Pass true as the third argument to addEventListener

    Explanation: Passing true as the third parameter to addEventListener enables capturing phase listening. captureEvent() is not a valid method. Attaching at the document root does not automatically use capturing. Custom event objects have no effect on propagation phases.

13. Direct and Delegated Event Handlers

    What is a main difference between a direct event handler and a delegated event handler?

    1. Direct handlers override default actions, delegated cannot
    2. A direct handler is attached to the element itself; a delegated handler is attached to a parent
    3. Delegated handlers cannot receive event objects
    4. Direct handlers use capture phase by default, delegated do not

    Explanation: Direct handlers are bound directly to elements, while delegated handlers use a parent to monitor multiple children via bubbling. Default phase is not dictated by handler type. Both can access the event object and modify the event if needed.

14. Click Event and Input Elements

    When a button inside a form is clicked and preventDefault is used in its handler, what will happen to the form submission?

    1. The form will not submit
    2. The form submits as usual
    3. Only the button's default is blocked; form still submits
    4. The form resets itself

    Explanation: preventDefault in a button's click handler stops the form’s default submission behavior. If preventDefault is omitted, form submission proceeds. Resetting is the result of a reset button, not a submit button. Blocking the button's default includes blocking form submission here.

15. Event Bubbling with Nested Elements

    If a span is inside a div and both have click listeners, which is true in the bubbling phase if the span is clicked?

    1. Only the span’s handler runs
    2. The span’s handler runs first, then the div’s
    3. Neither handler runs unless capturing is used
    4. The div’s handler runs first, then the span’s

    Explanation: In bubbling, events are handled first at the target (the span), then they move up to parent handlers like the div. Only handling at the span means bubbling is not occurring. Div first would be true for capturing. Handlers run in bubbling unless propagation is stopped.

16. Touching Event.stopImmediatePropagation

    What distinguishes event.stopImmediatePropagation from event.stopPropagation?

    1. It cancels the default action
    2. It prevents all subsequent listeners on the same element from firing
    3. It reverses the bubbling direction
    4. It only works during capturing phase

    Explanation: stopImmediatePropagation stops any further event listeners on the same element from running, in addition to halting propagation. Bubbling direction cannot be reversed. It does not affect default actions directly. It operates in both phases, not just capturing.