Next lesson: Call-to-action widgets script tag replacement To the next lesson →

Lesson: Event delegation Repeat

§ Event Delegation in JavaScript

In this video, we will be covering the concept of event delegation in JavaScript and how it can be used to improve the performance and efficiency of your web application.

Event delegation is a technique used in JavaScript to handle events efficiently. Instead of attaching an event listener to each individual element, we attach a single event listener to the parent element and let the event propagate up to the parent. Then, we use the target property of the event object to determine which child element was actually clicked.

For example, let's say we have a list of items, and we want to attach a click event to each item to toggle its class. We can use event delegation to attach a single event listener to the parent ul element, like this:

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>

  document.getElementById('my-list').addEventListener('click', function(event) {
    if (event.target.nodeName === 'LI') {


Practice is the fastest way to learn knowledge permanently. I have prepared a small task for you related to the lesson.



Materials related to the lesson:
Files associated with the lesson


Next: Call-to-action widgets script tag replacement(04:40)

To the lesson →