[Vanilla js] To Do List(할 일 수정기능) (이벤트 버블링)

To Do List에서 입력된 할 일을 수정버튼을 이용해 수정하는 코드 구현

요구사항

• 할 일의 수정 버튼을 누르면 prompt창이 뜸
• prompt 인터페이스에서 할 일을 입력받고, 확인버튼을 누르면 할 일이 수정됨

코드

//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)팝업 바깥쪽을 클릭했을 때 팝업이 닫히는 경우

• 만약 ul > li > button 으로 구성된 경우 (현재 코드의 경우임)
  button을 클릭하면, 클릭이벤트가 li에서도 발생하고 li의 부모인 ul에서도 발생함

번외)
event.currentTarget : 실제로 이벤트를 붙인 li를 가져오고 싶은 경우 event.target 대신 사용

class

class는 여러개의 태그를 동시에 선택할 때도 많이 쓰지만 특정 역할이 태그에 부여되었을 때도 사용된다. 따라서 classList는 유용하게 사용할 수 있다.

• 태그.classList.contains('class명') : 태그에 해당 class명이 포함되어 있을 때 true 반환
• 태그.classList.add('class명') : class명 추가
• 태그.classList.remove('class명') : class명 제거
• 태그.classList.replace('class명', '수정class명') : class명 수정