Event Delegation in JavaScript: The Dynamic List

Event delegation is a powerful technique in JavaScript that allows you to attach a single event listener to a parent element instead of attaching individual listeners to multiple child elements. This is particularly useful when dealing with dynamically generated content, as you don't need to re-attach event listeners every time a new element is added. This challenge will test your understanding of event delegation by requiring you to build a dynamic list handler.

Problem Description

You are tasked with creating a JavaScript function that handles click events on list items within an unordered list. The list items are dynamically added to the list, meaning they don't exist in the initial HTML. Your function should listen for clicks on the <ul> element and, when a click occurs on a list item (<li>), it should log the text content of that list item to the console. The function should not attach individual event listeners to each list item.

Key Requirements:

• Event Delegation: The solution must use event delegation. Attaching individual event listeners to each <li> is not acceptable.
• Dynamic Content: The list items are added dynamically after the page loads. Your solution must work correctly even if new list items are added later.
• Targeted Action: When a list item is clicked, the text content of that list item should be logged to the console.
• No Existing Event Listeners: Assume the <ul> element does not have any existing event listeners attached.

Expected Behavior:

1. The function should attach a single click event listener to the <ul> element with the ID "myList".
2. When a list item within "myList" is clicked, the text content of that list item should be logged to the console.
3. The function should handle dynamically added list items correctly. Clicking on a newly added list item should trigger the logging of its text content.

Edge Cases to Consider:

• What happens if the click target is not a list item? (e.g., the <ul> element itself). The function should gracefully handle this and not throw an error.
• What happens if the list is empty? The function should still work without errors.

Examples

Example 1:

HTML:
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

JavaScript (after function execution and clicking "Item 2"):
Console Output: "Item 2"

Explanation: Clicking "Item 2" triggers the event listener on the <ul>. The event listener checks if the target is an <li> and, if so, logs its text content.

Example 2:

HTML:
<ul id="myList">
</ul>

JavaScript (after function execution and clicking anywhere on the <ul>):
Console Output: (No output)

Explanation: The list is empty. The event listener is attached, but no list items exist to trigger the event.

Example 3:

HTML:
<ul id="myList">
  <li>Item 1</li>
</ul>

<script>
  // Dynamically add a new list item after 2 seconds
  setTimeout(() => {
    const newListItem = document.createElement('li');
    newListItem.textContent = 'Item 3';
    document.getElementById('myList').appendChild(newListItem);
  }, 2000);
</script>

JavaScript (after function execution, waiting 3 seconds, and clicking "Item 3"):
Console Output: "Item 3"

Explanation: The list item "Item 3" is added dynamically. The event delegation solution correctly handles this new item and logs its text content when clicked.

Constraints

• The solution must be written in JavaScript.
• The <ul> element will always have the ID "myList".
• The list items will be <li> elements.
• The solution should be efficient and avoid unnecessary DOM manipulations.
• The solution should not modify the HTML structure directly (other than dynamically adding list items as shown in Example 3).

Notes

• Think about how the event object provides information about the element that was clicked.
• Consider using event.target to identify the element that triggered the event.
• Remember that event delegation allows you to handle events for both existing and future elements.
• Focus on attaching the event listener to the parent element (<ul>) and checking the target element within the event handler.