// HTML
<ul class="myList">
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>

// JS
const myList = document.querySelector('.myList')

// Point 1: Note that here you're putting the event listener on the PARENT of the elements you want to turn red upon click, and it works.
myList.addEventListener('click', function(e) {
    const target = e.target
    // FYI the 'matches' method returns a boolean (and here it evaluates to 'true', and we know this because each of the elements DOES turn red upon click)
    if (target.matches('li')) {
        target.style.backgroundColor = 'red'
    }
})

// Point 2: This NEW 'li' element ALSO turns red in the UI upon click. 
const newLi = document.createElement('li')
newLi.textContent = "Delegation"
myList.appendChild(newLi)

// The lesson: You don't need to add an event listener for each child inside the parent. Instead just put it on the parent and it works for each child.

//-------------------------------------------------------------------

// HTML
<div class="button-container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>

// JS
document.querySelector('.button-container').addEventListener('click', function(event) {
    // The below line is only here to disable being able to click on the parent element (div with class 'button-container') which then gives an alert that reads 'You clicked on button 1 2 3 4 5', which is not what we want.
    // Note also that 'BUTTON' has to be in all uppercase because that's what tagName returns.
    if (event.target.tagName === 'BUTTON') {
        alert(`You clicked on button ${event.target.innerText}`)
    }
})