📌 KEY POINT
💚 input 박스를 통해 텍스트 입력 후 전송 버튼 클릭 시, '할일' 목록 추가
💚 끝/보류 버튼 클릭 시, 각 항목에 추가되며 기존 리스트에서는 사라짐
💚 데이터 보간법을 활용하여 리스트를 추가하는 방법
💚 동적생성태그의 이벤트 위임
👉🏻 마크업은 이렇게! (HTML5)
🩵 리스트 입력 박스 / 할 일 · 끝낸 일 · 보류된 일 리스트 마크업
🩵 끝 · 보류 · 삭제 버튼 마크업
<body>
<!-- 리스트 입력 박스 --!>
<input type="text" class="text">
<button class="submit">전송</button>
<!-- 할 일 --!>
<h2>할 일</h2>
<ul class="list1">
<li>
<span class="work">빨래</span>
<button class="end">끝</button>
<button class="wait">보류</button>
<button class="del">삭제</button>
</li>
</ul>
<!-- 끝낸 일 --!>
<h2>끝낸 일</h2>
<ul class="list2">
<li>
<span class="work">창고정리</span>
<button class="del">삭제</button>
</li>
</ul>
<!-- 보류된 일 --!>
<h2>보류된 일</h2>
<ul class="list3">
<li>
<span class="work">설거지</span>
<button class="end">끝</button>
<button class="del">삭제</button>
</li>
</ul>
</body>👉🏻 스크립트는 이렇게! (jQuery)
🩵 공통 스크립트 설명
🩵 .click() : 클릭 이벤트 작성
🔹 $('.submit').click(function(){});
🩵 동적으로 HTML 생성 (백틱을 이용한 문자열 보간 처리)
🔹 템플릿 리터럴(`)을 사용하여 HTML 문자열을 생성
🔹 keyword 변수를 ${} 안에 넣어, '사용자가 입력한 텍스트'를 태그 안에 삽입
🩵 .append() : 특정 요소 뒤에 새로운 요소를 추가하는 메서드
🔹 $('.list1').append(html);
🔹 전송 · 보류 · 끝 버튼 클릭 시, 각 항목의 리스트 뒤에 요소가 추가됨
🩵 input 입력 후, '전송' 버튼 클릭 이벤트
🩵 .val() : input을 통해 입력한 value 값 가져오기
🔹 keyword = $('.text').val();
🔹 내가 입력한 내용을 keyword 변수에 저장 (데이터 보간을 위해 변수에 저장)
🔹 일반 텍스트일 경우 .text() 를 통해 가져옴
🩵 if 조건문 : 입력값이 있을 때만 실행 (빈 값 방지)
🔹 입력값(keyword)이 비어 있지 않은 경우(true)에만 코드를 실행
🔹 만약 사용자가 아무것도 입력하지 않았다면(false), if문 내부의 코드는 실행되지 않음
🩵 입력 필드 초기화 & 포커스 이동
🔹 $('.text').val("").focus();
🔹 .val("") : 입력창을 비워서 초기화
🔹 .focus() : 입력창에 자동으로 포커스 이동
<script>
// 전송 버튼 클릭 -> 할 일 리스트 추가
$('.submit').click(function(){
keyword=$('.text').val();
if(keyword){
html =`<li>
<span class="work">${keyword}</span>
<button class="end">끝</button>
<button class="wait">보류</button>
<button class="del">삭제</button>
</li>`
$('.list1').append(html);
$('.text').val("").focus()
}
});
</script>🩵 동적생성태그의 이벤트 위임
🚫 위 클릭 이벤트처럼 직접 이벤트를 걸면 초기의 document에 존재하는 요소에만 이벤트가 적용되어 동적으로 생성된 태그의 버튼 클릭 시, 이벤트가 적용되지 않는다.
🩵 따라서 부모 요소(혹은 document)에 이벤트를 걸어 하위 요소에서 발생하는 이벤트를 감지해야하는데, 이것을 이벤트 위임이라고 한다.
🩵 '삭제' 버튼 클릭 이벤트
🩵 삭제('del') 버튼 클릭 시, 해당 리스트를 삭제
🔹 $(this).parent().remove()
🔹 삭제('del') 버튼의 부모인 li(리스트)를 찾아 remove(요소 삭제) 함
<script>
$(document).on("click", ".del", function(){
$(this).parent().remove()
//remove : 요소 삭제
});
</script>🩵 '끝' 버튼 클릭 이벤트
🩵 끝('end') 버튼 클릭 시, 끝난 일 리스트에 추가하는 방법도 동일하게 이벤트 위임과 템플릿 리터럴을 통해 동적으로 태그를 생성한다.
🔹 단, 끝난 일로 리스트에 추가할 때에는 클릭한 버튼 리스트 명을 가져와 추가해야하기 때문에 .siblings() 메서드와 .text() 메서드를 활용해야한다.
<script>
$(document).on("click", ".end", function(){
// 끝 버튼을 클릭한 요소의 텍스트를 가져옴
keyword=$(this).siblings('.work').text();
html =`<li>
<span class="work">${keyword}</span>
<button class="del">삭제</button>
</li>`
$('.list2').append(html);
$(this).parent().remove();
});
</script>🩵 '보관' 버튼 클릭 이벤트
🩵 이하 동일
<script>
$(document).on("click", ".wait", function(){
keyword=$(this).siblings('.work').text();
html =`<li>
<span class="work">${keyword}</span>
<button class="end">끝</button>
<button class="del">삭제</button>
</li>`
$('.list3').append(html);
$(this).parent().remove();
});
</script>