eventDelegation.html

<div>
    <ul id="category">
        <li id="laptop">Laptop</li>
        <li id="cameras">Camera</li>
        <li id="shoes">Shoes</li>
    </ul>
</div>
<div id="form">
    <input type="text" id="name" data-uppercase/>
    <input type="text" id="pan"/>
    <input type="text" id="email" data-uppercase/>
</div>
<script src="./js/eventDelegation.js"></script>

eventDelegation.js

//single event listenet attached to parent
//its listening to all the child elements

//we have a issue of we directly redirect
// lets assume if we have child which is a or any other elemne
// if we do similar way then we are redirecting for each click
//Benefits 
/**
 * Memory 
 * Metigates the risk or performance bottelnex
 * writing less code
 * dom manipulation
 */

 //Limitation 
 /**
  * All the events are not bubbled up
  * Blur / focus / resizing / scrolling are not bubbled up
  * if you are using stop propogation in code event delegation will not work
  */
document.querySelector ('#category').addEventListener ('click', (e) => {
    console.log ('Category parent clicked');
    console.log (e.target);
    console.log (e.target.id);
    console.log (e.target.tagName);
    if (e.target.tagName === 'LI') {
        console.log ('then only redirect or do some operation');
        //hence we are preventing unnecessary clicks
    }
})

document.querySelector('#form').addEventListener ('keyup', (e) => {
    if (e.target.dataset.uppercase !== undefined) {
        e.target.value = e.target.value.toUpperCase ();
    }
});