[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명 수정
Author And Source
이 문제에 관하여([Vanilla js] To Do List(할 일 수정기능) (이벤트 버블링)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yunee/Vanilla-js-To-Do-List할-일-수정기능-이벤트-버블링저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)