Javascript - event/ addEventListener/ forms/ 템플릿 리터널(template-literal)

---

목차

1. event

2. addEventListener

3. forms

4. template-literal

5. mouseover, mouseout 

mouseenter, mouseleave

---

 

 

1. event

 

• onclick

document.getElementById("btn").onclick = function (e) {
  console.log("클릭함");
  console.log(e);
};

- "btn"이란 이름의 아이디를 눌렀을때 console창에 "클릭함"이 뜨고

- (e) 이벤트의 PointerEvent를 보여준다. (pointerType, type 등등 정보를 알수있다)

 

 

• onload

window.onload = function () {
  console.log("페이지 로딩완료");
};

- 웹페이지 자체가 로딩이 되었는지, 완료가 되었을때 console창에 "페이지 로딩완료" 라고 뜬다.

 

 

• onresize

window.onresize = function (e) {
  document.getElementById("width").innerHTML = e.target.innerWidth + "px";
  document.getElementById("height").innerHTML = e.target.innerHeight + "px";
};

- 브라우저 사이즈가 바뀔때마다 "px"를 보여준다.

- onresize 활용으로 if문을 넣어 가로모드인지, 세로모드인지에 따라 변환할수 있다.

 

 

• onkeydown

window.onkeydown = function (e) {
  console.log(e);
};

- 키보드에 입력했을 때의 입력값을 console창에서 keyboardEvent { } 로 보여준다.

- code의 내용과 keycode를 확인해볼수있다.

- 키보드에서 a를 입력했을때

   → code : "KeyA" // keycode : 65 (아스키코드)

 

 

• input을 활용해서 onfocus, onblur, onchange, oninput

<form id="test-form">
        <input type="text" name="name" id="name" />
        <button>입력 완료</button>
</form>

document.getElementById("name").onfocus = function (e) {
  console.log("포커싱");
};

document.getElementById("name").onblur = function (e) {
  console.log("밖으로 나갔음");
};

document.getElementById("name").onchange = function (e) {
  console.log(e.target.value);
};

document.forms["test-form"]["name"].oninput = function (e) {
  console.log(e.target.value);
};

- onfocus : input에 커서가 들어왔을때를 말한다.(입력하기위해 input을 눌렀을때)

- blur : 커서가 input 밖을 클릭했을때 console창에서 "밖으로 나갔음"이 뜬다.

- onchange : input에 포커싱되어 값을 입력하고 블러되었을때 console창에서 입력한값이 출력된다. (포커스가 풀렸을때)

  → 회원가입할때 아이디 적는칸에서 조건을 충족하지못했을때 그 조건을 알려주는 용도로 사용가능하다!!

- oninput : input에 적는 값(value)이 바로 console창에 다 나오게된다. 한글도 입력한 그래도 나온다!

   → 한글의 경우 조합형이라 console창에 두번씩 찍힐때도 있다!

 

 

 

2. addEventListener

 

- listener 안에 콜백함수를 넣어 event를 실행시키는

- onclick을 .addEventListener("click", ( ) => { }) 으로 사용할수있다.

document.getElementById("btn").addEventListener("mouseover", (e) => {
  console.log("버튼 위 마우스");
});

- "btn"이란 이름의 아이디에 마우스가 올라갔을때(mouseover) console창에 "버튼 위 마우스"가 뜬다.

 

window.addEventListener("pointerdown", (e) => {
  console.log(e.pageX);
  console.log(e.pageY);
});

window.addEventListener("pointerup", (e) => {
  console.log(e.pageX);
  console.log(e.pageY);
});

- 드래그를 했을때 시작과 끝의 좌표를 확인해볼수있다. (page X,  pageY )

  → 마우스에 손을 얹어 클릭하고(pointerdown) 드래그 한 다음 손을 마우스에서 떼었을때(pointerup)

 

 

window.addEventListener("touchstart", (e) => {
  console.log(e);
  console.log(e.pageX);
  console.log(e.pageY);
});

window.addEventListener("touchend", (e) => {
  console.log(e.pageX);
  console.log(e.pageY);
});

- 터치를 했을때의 좌표를 확인해 볼수있다.

- console창에서  TouchEvent{ }로 보여준다. (touchstart, touchend)

   (( 하지만 F12눌러 device toolbar에서 터치하면 undefined가 뜬다...))

 

 

 

3. forms

 

- input에 값을 입력하고 입력완료 버튼을 누르면 입력한 값이 주소에 들어간다. (주소가 바뀐다)

document.getElementById("test-form").onsubmit = () => {
  alert("데이터 보냈어");
};

document.getElementById("test-form").onsubmit = (e) => {
  e.preventDefault();
  console.log("데이터 안보냈어");
};

- alert창으로 "데이터 보냈어"가 뜨고 

- submit은 form데이터를 서버에 보낸다는 뜻으로 ( 요청을 보내는 방법으로 주소를 옮긴다는것)

- 그래서 e.preventDefault(); 라는 메서드를 주어서 기본적으로 작동하는것을 막아 데이터를 보내지않게한다.

  → form에서 많이 사용한다.

 

▼ 다른방법

console.log(document.forms["test-form"]);

document.forms["test-form"].onsubmit = (e) => {
  e.preventDefault();
  console.log("데이터 입력완료");
};

document.forms["test-form"].getElementsByTagName("button")[0].onsubmit = (
  e
) => {
  e.preventDefault();
  console.log("버튼 서브밋?");
};

 

 

 

4. 템플릿 리터널 (template-literal) `(백틱)

 

console.log(`${1 + 2 + 3 + 4}`);

- console창에서 1+2+3+4의 값인 10이 뜬다.

- 1옆에 있는 ` 백틱을 사용해서 자바스크립트를 입력할수있다. 백틱안에 ${ } 을 넣어 사용한다.

- 중괄호안에는 삼항연산자, 변수, 함수같이 반환값이 있는것을 넣어 사용한다.

 

const tempFruit = {
  name: "사과",
  color: "red",
};

console.log(
  `이 과일의 이름은 ${tempFruit.name}이고 색깔은 ${tempFruit.color}이다.`
);

 

 

 

5. mouseover,  mouseout, mouseenter, mouseleave

 

document.getElementById("btn").addEventListener("mouseover", (e) => {
  console.log("마우스가 올라갔을때");
});

document.getElementById("btn").addEventListener("mouseout", (e) => {
  console.log("마우스 나감");
});

document.getElementById("btn").addEventListener("mouseenter", (e) => {
  console.log("mouse enter");
});

document.getElementById("btn").addEventListener("mouseleave", (e) => {
  console.log("mouse leave");
});

 

mouseover와 mouseout 은 "btn"이란 이름의 아이디에 자식이 있을경우 자식까지 포함해서 마우스가 올라가고 나갈때마다 console창에서 "마우스가 올라갔을때"와 "마우스 나감"이 나타난다.

하지만 mouseenter와 mouseleave는 "btn" 본인에게서만 마우스가 올라가고 나갔을때 console 창에서 "mouse enter"와 "mouse leave"가 뜬다.

 

---

★ 오늘의 포인트와 남겨두기 ★

 

※ onsubmit에 대해서 다시 이해하고 정리하기
※ PointerEvent는 webAPI에서 전달해준내용이다.

    → 내가 보낸 콜백함수를 webAPI가 호출한것 (내가 호출하지 않았으니까)

※ alert 는 페이지 외적으로 팝업 (페이지 내적이라면 모달이라고 한다)

※ preventDefault();

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

** 목표에 대해 생각하자!!!!!

* 만들고 싶은것의 흐름을 생각해보기