Event Handling Made Easy Quiz Quiz

Dive into the essentials of event handling with this quiz designed to sharpen your understanding of event listeners, propagation, and best practices. Assess your skills and knowledge of core event handling principles, scenarios, and common pitfalls.

1. Identifying Correct Event Listener Syntax

   Which of the following is the correct way to attach a click event handler to an element named 'button' so that a function called 'handleClick' runs on click?

   1. button.attachEvent('onclick', handleClick);
   2. button.emit('click', handleClick);
   3. button.onClick = handleClick;
   4. button.addEventListener('click', handleClick);

   Explanation: The correct way is using addEventListener, as in button.addEventListener('click', handleClick);, which attaches the handler for the 'click' event. The onClick variant uses an incorrect case and property. attachEvent was used in very old environments and is now obsolete. emit is not standard for DOM elements and instead is used in other event systems, so it is not appropriate here.

2. Understanding Event Propagation

   If a child element and its parent both have a click event listener, what is the default order in which the event handlers are triggered when the child element is clicked?

   1. Parent's handler first, then child's handler
   2. Only the parent's handler is triggered
   3. Only the child's handler is triggered
   4. Child's handler first, then parent's handler

   Explanation: By default, click event handlers are triggered on the target element (the child) first, then bubble up to its ancestors (the parent). This is called the bubbling phase. The capturing phase, which would trigger parent first, is not the default. Stating that only one or the other runs ignores bubbling, which is the standard event model in most cases.

3. Preventing Default Event Actions

   In event handling, which method can you use within an event handler to stop a form's default submit behavior?

   1. event.cancelBubble();
   2. event.stopPropagation();
   3. event.preventDefault();
   4. event.preventForm();

   Explanation: Calling event.preventDefault(); prevents the default action, such as the form submitting. event.stopPropagation(); and event.cancelBubble(); are used to stop the event from moving through the propagation phases, not to block default actions. There is no method called preventForm();, so that is incorrect.

4. Removing Event Listeners

   What must you ensure in order to successfully remove an event listener that you previously attached with addEventListener?

   1. Always use an anonymous function when detaching
   2. Event listeners cannot be removed once added
   3. Use the same function reference and event type as when attaching
   4. You can remove any listener with a different function if the event type matches

   Explanation: To remove an event listener, you must specify both the same function reference and event type that were used for initially attaching the listener. Anonymous functions cannot be removed because their references are not preserved. Removing a listener with a different function or just matching the event type will not work. Saying they cannot be removed is incorrect, as removal is part of standard event management.

5. Delegating Event Handling

   Which scenario best illustrates the use of event delegation for handling click events on list items inside a single ul element?

   1. Adding a separate click event listener to each li element
   2. Attaching a click event listener to the ul, checking event.target for list items
   3. Using a global click event listener on the body to catch list item clicks
   4. Attaching a click event directly to each ul element separately

   Explanation: Event delegation involves adding a listener to a common ancestor (ul) and responding to events based on the actual element clicked, using event.target. Adding a listener to each li is not event delegation and is less efficient. A global listener on the body is too broad and not targeted. Attaching a listener to each ul is unrelated to handling individual list items.