Event delegation

Another useful pattern isevent delegation: say we have a form and want to add achangeevent listener to all of itsinputchildren. One way to do so would be iterating over them usingmyForm.querySelectorAll('input')as shown above. However, this is unnecessary when we can just as well add it to the form itself and check the contents ofevent.target.

myForm.addEventListener('change',function(event){
    const target = event.target  
    if(target.matches('input')){
        console.log(target.value)
    }
})

Another advantage of this pattern is that it automatically accounts for dynamically inserted children as well, without having to bind new listeners to each.