이벤트 위임(Event Delegation)

: 자식 요소에서 발생하는 이벤트를 부모 요소에서 다루는 방식.

const list = document.querySelector('#list');//querySelector로 list라는 아이디를 가진 요소에 접근.


//부모 요소인 list에 이벤트 핸들러를 하나만 등록해줘도 모든 자식 요소의 이벤트를 다룰 수 있음.
//여기서도 한가지 문제가 남이있는데, 부모 요소에 등록된 이벤트 핸들러이기 때문에 자식 요소를
  제외한 온전히 부모인 요소를 클릭해도 이벤트 핸들러가 동작한다.
//그래서 이벤트 위임을 할때는 명확하게 원하는 요소에서 의도한 동작이 일어나게끔 따로 처리를 해야함.

list.addEventListener('click', function(e) {
	// if (e.target.tagName === 'LI')-->타겟 프로퍼티의 태그네임이 li인지 확인
	if (e.target.classList.contains('item')) {//classList의 contains메소드를 활용해서 item이라는 
    클래스를 가지고 있는지 확인하면 해결 가능.
   
	//tagName 프로퍼티는 말 그대로 해당 요소의 태그 이름값을 대문자로 담고 있는 프로퍼티.

	//classList의 contains메소드는 파라미터로 전달하는 값(item)이 해당 요소의 클래스 속성에 있는지를
	//확인해서 불린 형태로 리턴해주는 메소드.
		e.target.classList.toggle('done');
	}
});

const li = document.createElement('li');
li.classList.add('item');
li.textContent = '일기 쓰기';
list.append(li);
// li.addEventListener('click', function(e) {
//   e.stopPropagation();
// }); //정말 필요한 경우가 아니면 이벤트 버블링을 막지 않는것이 좋음.