JavaScript Event Delegation for Dynamic List items

Last update on July 10 2025 12:50:00 (UTC/GMT +8 hours)

JavaScript Event Handling: Exercise-11 with Solution

Event Delegation on List Items

Write a JavaScript program to handle click events on dynamically added list items using event delegation.

Solution 1: Using Event Delegation with addEventListener

JavaScript Code:

// Create a parent element
const listContainer = document.createElement('ul');
listContainer.id = 'dynamic-list';
document.body.appendChild(listContainer); // Add the parent element to the DOM

// Function to add a new list item
function addListItem(content) {
  const newItem = document.createElement('li'); // Create a new list item
  newItem.textContent = content; // Set the list item text
  listContainer.appendChild(newItem); // Append it to the parent container
}

// Add multiple list items dynamically
addListItem('Item 1');
addListItem('Item 2');
addListItem('Item 3');

// Event delegation: Add a click event listener to the parent
listContainer.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') { // Check if the clicked element is a list item
    alert(`You clicked on: ${event.target.textContent}`); // Show an alert with the item text
  }
});

Output:

•	Item 1
•	Item 2
•	Item 3

Explanation:

In the above exercise,

1. Create Parent Element:

A <ul> (unordered list) element is created using document.createElement('ul').
The id of the <ul> is set to dynamic-list for identification.
The <ul> is appended to the document body, making it visible in the DOM.

2. Function to Add List Items:

The addListItem function takes a string (content) as input.
A new <li> (list item) is created using document.createElement('li').
The text content of the <li> is set to the provided string.
The <li> is appended to the parent <ul> (listContainer).

3. Add Multiple List Items:

The addListItem function is called three times with different inputs ('Item 1', 'Item 2', 'Item 3').
Three list items are dynamically added to the <ul>.

4. Event Delegation:

A click event listener is added to the parent <ul> (listContainer).
When any child <li> is clicked, the event listener checks if the clicked element (event.target) is a list item using event.target.tagName === 'LI'.

5. Handle Click Event:

If the clicked element is an <li>, an alert is displayed showing the text content of the clicked item.
This ensures only list items trigger the action, and newly added items are handled without additional listeners.

Solution 2: Using onclick Property for Delegation

JavaScript Code:

// Create the parent element
const listContainer = document.createElement('ul');
listContainer.id = 'dynamic-list';
document.body.appendChild(listContainer); // Add the parent container to the DOM

// Function to add list items
function addListItem(content) {
  const listItem = document.createElement('li'); // Create a new list item
  listItem.textContent = content; // Set its content
  listContainer.appendChild(listItem); // Append it to the parent container
}

// Dynamically add items
['Apple', 'Banana', 'Cherry'].forEach((item) => addListItem(item));

// Using the onclick property to handle events
listContainer.onclick = (event) => {
  if (event.target.tagName === 'LI') { // Verify it's a list item
    console.log(`Clicked item: ${event.target.textContent}`); // Log the clicked item
  }
};

Output:

•	Apple
•	Banana
•	Cherry

Explanation:

1. Create the Parent Element:

A <ul> (unordered list) element is created using document.createElement('ul').
The id of the <ul> is set to dynamic-list for identification.
The <ul> is appended to the document.body, making it visible in the DOM.

2. Function to Add List Items:

The addListItem function takes a string parameter (content).
A new <li> (list item) is created using document.createElement('li').
The text content of the <li> is set to the value of the content parameter.
The newly created <li> is appended as a child to the parent <ul> (listContainer).

3. Dynamically Add Items:

An array ['Apple', 'Banana', 'Cherry'] is iterated over using forEach.
Each array element is passed as the content argument to the addListItem function, dynamically creating three list items.

4. Using the onclick Property for Events:

The onclick property of the parent <ul> is assigned a function to handle click events.
When an item within the <ul> is clicked, the event.target property identifies the clicked element.
The if condition ensures that only <li> elements trigger the event logic.
The console.log statement logs the text content of the clicked <li>0. element to the console.

Live Demo:

See the Pen javascript-event-handling-exercise-11 by w3resource (@w3resource) on CodePen.

For more Practice: Solve these Related Problems:

Write a JavaScript program that uses event delegation to handle click events on dynamically generated list items.
Write a JavaScript function that attaches a single event listener to a parent element to manage events on its child list items.
Write a JavaScript program that updates the content of a list item upon clicking it using event delegation.
Write a JavaScript function that uses event delegation to remove a list item when its embedded delete button is clicked.

Go to:

PREV : Double-Click Event Action.
NEXT : Prevent Default Behavior.

Improve this sample solution and post your code through Disqus.