이벤트 위임

부모 안의 자식요소들에게 반복되는 이벤트를 처리해야 할 때, 일일이 자식요소에 추가하는 것보다는 부모에 넣어주는 것이 좋음.

GOOD 이벤트 위임

<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
 </ul>
 <script>
const ul = document.querySelector('ul');
  ul.addEventListener('click', e =>{
    if(e.target.tagName === 'LI'){
      event.target.classList.add('selected')
     }
   })
</script>

<script>
items.addEventListener('click', e =>{
  const id = e.target.dataset.id;
  if(id){
    const toBeDeleted = document.querySelector(`.item[data-id="${id}"]`)
    toBeDeleted.remove()
  }
})
</script>

BAD 방법

const lis = document.querySelector('ul')
   lis.forEach(li =>{
     li.addEventListener('click', () =>{
       li.classList.add('selected')
     })
   })