(자바스크립트) 이벤트 위임(event delegation) 이게 뭔가요? 왜 굳이 부모에 다는지

리스트에 아이템이 여러 개 있고 각각 클릭하면 뭐가 실행되게 하려고 하는데요, 지금은 그냥 이렇게 하나하나 다 걸어놨거든요.

const items = document.querySelectorAll('.item');
items.forEach(function(el) {
  el.addEventListener('click', function() {
    console.log('클릭됨', el.dataset.id);
  });
});

근데 문제가 아이템을 나중에 자바스크립트로 추가하면 그 새 아이템은 클릭해도 아무 반응이 없더라고요. 위에서 querySelectorAll 돌릴 때 이미 있던 애들한테만 이벤트가 걸려서 그런 거 같은데요.

검색해보니까 이벤트 위임이란 걸 쓰라던데 이게 정확히 뭔가요? 자식들한테 안 걸고 부모 하나에 이벤트를 건다는 것 같긴 한데, 그러면 어떤 아이템을 클릭했는지는 어떻게 아는 건지 감이 안 잡혀요. 대충 이런 식이 맞나요?

const list = document.querySelector('.list');
list.addEventListener('click', function(e) {
  // 여기서 어떻게 구분하지...?
});

그리고 왜 하나하나 거는 것보다 이게 더 좋은 건가요? 성능 얘기도 나오던데 그게 정말 체감될 정도인지도 궁금합니다.