20. [Java Script] 이벤트 발생 객체, 입력방식에 따른 이벤트, input 값 비우기, input 공란이면 이벤트 막기, 삭제버튼 구현, JS로 Todo List만들기

함수내부에서 이용하는건 간단하지만, 

 

이벤트 리스너를 함수 외부로 분리하는 경우!

 

이벤트 리스너를 외부로 분리해서 textarea에 접근하는 방법은  두 가지가 있다. 

1. event.currentTarget 속성을 이용한다. 

이벤트가 적용된 부모요소 혹은 자신. 이벤트 범위를 가리지 않고 직접적으로 사용이 가능. 

2. this키워드 이용(화살표함수 이용 불가능)

함수가 호출되는 시점에 참조하는 객체가 결정된다. this선언시 코드가 어떤 스코프가 호출되는지에 따라 this가 참조하는 객체는 달라질 수 있다. 

 

Document.addEventListner(‘DOMContentLoaded’, () =>{
	const h1 = document.querySelector(‘h1’)
	const textarea = document.querySelector (‘textarea’)

	textarea.addEventListner(‘keyup’, () => {
	h1.textContent = `글자 수 : ${textarea.value.length}`
	})
	textarea.addEventListner(‘keyup’,(event) => {
	h1.textContent = `글자 수 : ${event.currentTarget.value.length}`
	})
	textarea.addEventListner (‘keyup’,function() {
	h1.textContent = `글자 수 : ${this.value.length}`
	})
})

This를 활용할 경우, 화살표 함수 말고 일반

Function() {} 형태.

저 this가 textarea의미. 

 

 

이건 그동안 많이 쓰던 방식

 

 

 

기본이벤트 막기 350p

 

preventDefault() 메서드를 이용하면 기본이벤트를 제한할 수 있다. 

 

글자입력양식에 따른 이벤트

 

입력양식: 버튼

세 가지 케이스가 있다. 

1. <button> 글자 <button>

2. <input type=button value=“글자 ”>

3. <input type=submit value="글자”> 

이 중 3번은 form태그 내에 있어야 한다. 

 

1번과 2번 케이스는 clickEvent를, 3번 케이스는 submitEvent 활용할 수 있다 

 

클릭이벤트 예제

클릭이벤트 어떻게 쓰는지 요 양식 잘 보세요

buttonA.addEventListner(‘click’, (event)=>{
	event.currentTarget.textContent += ‘글자’
})

event.currentTarget 은 지난 시간에 배운 내용.

.textContent 로 접근하여 ‘글자’를 원래 있던 텍스트의 뒤에 덧붙인다. 

 

buttonB.addEventListner (‘click’, (event)=>{

	event.currentTarget.value +=‘글자’

})

input type=button 은 내부 글자 변경을 위해 textContent가 아니라 value속성을 직접 수정해야 함. 

 

이메일 작성 form 만들기

form.addEventListner(“submit”, () => {

if (텍스트에 @가 있을 때) { 정상제출}

else{이메일아니라는 알럿}

 

제출안되게 막는건? 좀 전의 이벤트 막기 메서드 이용

form.addEventListner(“submit”, (event) =>

…생략..

event.preventDefault()

요약:

<button> , <input type="button">  : 클릭이벤트 위주로,

<input type="submit"> : 입력양식제출용으로 이용

 

 

form태그 내에 button태그 -> submit과 동일하게 동작! 

그래서 form태그 내에 버튼을 만들 땐, button태그 말고 <input type=‘button’> 으로 만드세요!

 

 

입력양식: 글자 입력

글자입력방식에도 세가지 방식의 태그가 있다. 

1.  <input type="text" />

2.  <textarea name="" id="" cols="30" rows="10"></textarea>

3.  <p contenteditable="true"></p>

 

value속성활용해서

changeEvent와 Keydown, keyup, keypress이벤트를  많이이용한다.

 

textarea태그 또한 input처럼 value 속성을 이용해서 내부 값 가져올 수 있다!

textarea.value 

 

버튼 클릭 없이 입력하면 바로 변환하는 방법? Keyup 이용!

버튼부분 비활성화시키고

 

button.addEventListener("click", () => {

          p.textContent = `${textarea.value * 2.54}cm로 변환 완료! `;

        });

에서

 

input.addEventListener (“keyup”, () => {

        p.textContent = `${textarea.value * 2.54}cm로 변환 완료! `;

        });

으로 변경 후 실행하면 클릭없이 input입력 후 바로 결괏값이 렌더링 된다. 

 

 

change이벤트를 이용하면 입력 후에 다른 곳 클릭하거나 엔터치면 클릭 없이 값이 나옴

input.addEventListener("change", () => {

          p.textContent = `${Number(input.value) * 2.54}cm로 변환 완료! `;

        });

 

 

 

Todo List 로 연습해보기.......(개인적으로 주옥같다 생각한 부분)

createElement('h1)으로  h1태그를 만들고 태그에 "할일목록"을 주입시킨다.

그리고 appendChild를 이용해 화면에 띄운다. 

createElement로 input태그를 만들어 해당 태그를 화면에 띄우고,

addButton을 생성해 '추가하기'라는 내용을 버튼 안에 넣어서 화면에 띄운다. 

document.addEventListener("DOMContentLoaded", () => {

        const h1 = document.createElement("h1");

        h1.textContent = "할일목록";

        document.body.appendChild(h1);



        const input = document.createElement("input");

        document.body.appendChild(input);



        const addButton = document.createElement("button");

        addButton.textContent = "추가하기";

        document.body.appendChild(addButton);



        addButton.addEventListener("click", () => {

          const div = document.createElement("div");

          document.body.appendChild(div);



          const checkbox = document.createElement("input");

          checkbox.type = "checkbox";

          div.appendChild(checkbox);



          const span = document.createElement("span");

          span.textContent = input.value;

          div.appendChild(span);



          const deleteButton = document.createElement("button");

          deleteButton.textContent = "제거하기";

          div.appendChild(div);

        });

      });

 

밑에 오타 수정..

그리고 클릭 이벤트 함수 만들기. 

addEventListner('click', () => {} ) 형태는 아마 평생 안까먹지 않을까???????

클릭이벤트함수 내에 체크박스를 타입으로 하는 input태그를 만들고, span태그를 만드는데, 요 span태그는 곧 todo의 내용이 될 것이다. 그리고 delete기능을 하게될 버튼도 만든다. 

input.value 인풋에 들어가게될 값을 그대로 span태그 내에 주입. 

 

그리고 

인풋 내에 글씨가 없으면 추가하기 버튼 안눌리는 기능구현

추가하기 후 인풋 비우는 기능을 추가하려면??

 

이거 잘보세여......

input의 value가 "", 즉 빈 값이 아닐! 때에만 해당 코드 전체가 실행되게 한다. 

그리고 span태그파트에서

span.textContent = input.value 로 인풋의 밸류값을 가져오고 나서,

input.value = "" 으로 비워준다.

 

 

체크박스 누르면 취소선이 그어지고, 제거버튼누르면 제거되는 기능구현

//change함수인 이유는? 상태가 checked로 바뀌거나 unchecked로 바뀔 때마다 style도 바뀌어야하기때문.//
checkbox.addEventListener ("change", () => {
	if (checkbox.checked) {
    	div.style.textDecoration = "Line-through"
        } else {
        div.style.textDecoration = "" }
        //checked상태에서만 line-through적용하고 그게 아니면 스타일없음//      
})

delete 왜이렇게 간단하지..... 리액트로 삭제버튼만들려면 난리나는데...🥲😭

삭제는 버튼 클릭으로 이벤트를 발생시키니까 당연히 ("click" , ()=> {}) 로 시작할 것이고,

parentNode.removeChild(div)

---> 즉, 클릭한 해당 요소를 제거한다.

 

끝!

8장은 다음에 올리겠습니다 ...

 

지난 주차 리액트 숙련이 끝나고...

오랜만에 Js 스터디를 했다. 

 

계획상, 어제도 미리 했어야 하는건데 🤯

오늘 하루종일 자바스크립트 공부했다. 

매니저님들께선 자바스크립트는 매일 조금씩이라도 해야한다고 말씀하셨다 😭 맨날이요????? ㅠㅠ

일단 리액트 진도 따라잡기도 바빠서 자꾸 미루고있지만, JS도 그렇고 알고리즘 문제 풀기도 조금씩 할 생각이다.

내일부터 조금 강도를 높여볼것이다

 

일단 목표는 12시 이전에 컴퓨터 끄는 일 절대 없게하기 . ㅋㅋ..

 

화이팅.