To Do List에서 입력된 할 일을 수정버튼을 이용해 수정하는 코드 구현
//index.html
<ul id="daily-todo-list"></ul>
//index.js
$('#daily-todo-list').addEventListener('click', e => {
if (e.target.classList.contains('todo-edit-button')) {
//수정버튼(e.target)을 누른 곳에서 제일 가까운 li태그로 타고 올라가서 span태그 선택
const $todoText = e.target.closest('li').querySelector('.todo-text'); //🧡🧡
//prompt return값은 수정할 값 //innerText는 element(span태그)에 있는 text값
const renamedTodoText = prompt('할 일 수정', $todoText.innerText); //prompt('내용', '기본값')
$todoText.innerText = renamedTodoText; //다시 span태그 안 text를 바뀐 내용으로 수정
...
const todoItemTemplate = dailytodo => {
return `
<li>
<span class="todo-text">${dailytodo}</span> //🧡🧡
<button
type="button"
class="todo-edit-button"
>
수정
</button>
<button
type="button"
class="todo-remove-button"
>
삭제
</button>
</li>
`;
}; //사용자가 입력한 할 일을 인자로 받아와서 li태그에 넣음
...
이벤트 버블링은 HTML의 특성으로 생기는 현상
부모를 클릭했을 때, 자식한테 이벤트가 발생
ex)팝업 바깥쪽을 클릭했을 때 팝업이 닫히는 경우
번외)
event.currentTarget
: 실제로 이벤트를 붙인 li를 가져오고 싶은 경우 event.target
대신 사용
class는 여러개의 태그를 동시에 선택할 때도 많이 쓰지만 특정 역할이 태그에 부여되었을 때도 사용된다. 따라서 classList는 유용하게 사용할 수 있다.
태그.classList.contains('class명')
: 태그에 해당 class명이 포함되어 있을 때 true 반환태그.classList.add('class명')
: class명 추가태그.classList.remove('class명')
: class명 제거태그.classList.replace('class명', '수정class명')
: class명 수정