event 위임

<div class="main">
  <h2 class="title">오늘 할 일</h2>
  <ul id="to-do-list">
    <li class="item">자바스크립트 공부하기</li>
    <li class="item">고양이 화장실 청소하기</li>
    <li class="item">고양이 장난감 쇼핑하기</li>
  </ul>
</div>
<style>
.main {
	width: 350px;
	margin: 40px;
  	padding: 30px 0;
  	background-color: #FCFCFC;
 	box-shadow: -5px -5px 20px #DFDFDF,  5px 5px 20px #BABECC;
  	border-radius: 8px;
    text-align: center;
}

.title {
	margin: 15px auto;
	font-size: 30px;
	font-weight: 600;
	color: #9600FF;
}

#to-do-list {
  	width: 280px;
	margin: 0 auto 15px;
	padding: 0;
	list-style: none;
}

#to-do-list li {
	display: flex;
	align-items: center;
	justify-content: center;
  	width: 90%;
  	height: 40px;
	margin: 8px auto 15px;
	border-bottom: 1px solid #9600FF;
	cursor: pointer;
}
</style>

<script>
const toDoList = document.querySelector('#to-do-list');
// 1. updateToDo 함수 실행 > 클릭한 타겟이 item이란 클래스를 가지고 있을때 done 클래스 토글
// event를 매개변수로 받아오니까 함수안에서 사용하는 값도 매개변수를 기본으로 사용한다. 요거 좀 까먹지 말자!!!
function updateToDo(event) {
  if(event.target.classList.contains('item')){
    event.target.classList.toggle('done');
  }
}

// 2. doDoList 클릭시 updateToDo 실행
toDoList.addEventListener('click', updateToDo);

// 새로운 li 추가
const newToDo = document.createElement('li');
newToDo.textContent = '가계부 정리하기';
newToDo.classList.add('item');
toDoList.append(newToDo);
// 3번째 item 이벤트 발생 중지 stopPropagation()이 상위 엘리먼트로의 이벤트 전파를 막아주는 기능 상위 엘리먼트에서 하위 엘리먼트로 가는 이벤트 전파 또한 막는다.
toDoList.children[2].addEventListener('click', function(e) {e.stopPropagation()});
</script>

추가 내용
e.preventDefault()와 e.stopPropagation()의 차이
e.preventDefault는 고유 동작을 중단시키고,
e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.
(출처 : https://pa-pico.tistory.com/20)