Sticky notes – solution 2 – event delegation

The principle of event delegation is to register an event listener on a parent event and let event propagation tell us what element has been clicked on. Remember our diagram of the event life cycle and the layers through which an event travels? We can use this to our advantage. Take a look at line 37, which is shown here: 

container.addEventListener('click', (e) => {
 if (e.target.className === 'box') {
   document.querySelector('#color').innerHTML = 
    e.target.style.backgroundColor
   document.querySelector('#message').innerHTML = e.target.innerHTML
   messageBox.style.visibility = 'visible'
   document.querySelector('#delete').addEventListener('click', (event) => {
     messageBox.style.visibility = 'hidden'
     e.target.remove()
   })
 }
})

You can find this code on GitHub at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python...