Step by Step

Javascript 이벤트(addEventListener) 본문

Javascript Study

Javascript 이벤트(addEventListener)

짤진이 2023. 11. 18. 02:40
반응형

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="main.js"></script>
  <style>
    form {
      padding: 10px;
      border: 4px solid transparent;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    form.active{
      border-color: orange;
    }
  </style>
</head>
<body>
  <form>
    <input type="'text" placeholder="'ID">
    <input type="password" placeholder="PW">
    <button type="submit">제출</button>
    <button type="reset">초기화</button>
  </form>
</body>
</html>

 

 

main.js

const formEl = document.querySelector("form");
const inputEls = document.querySelectorAll("input");

inputEls.forEach((el) => {
  el.addEventListener("focus", () => {
    formEl.classList.add("active");
  });
  el.addEventListener("blur", () => {
    formEl.classList.remove("active");
  });
  el.addEventListener("change", (evnet) => {
    console.log(event.target.value);
  });
});

formEl.addEventListener("submit", (event) => {
  event.preventDefault(); // 기본동작방지 submit 이벤트가 발생하면 새로고침되므로 추가한 것
  const data = {
    id: event.target[0].value,
    pw: event.target[1].value,
  };
  console.log("제출!", data);
});

formEl.addEventListener("reset", (event) => {
  console.log("리셋");
});

 

form인 태그를 fromEl로 받아주고 input 태그 전부를 inputEls로 받아준다.

inputEls 중 for문을 돌려서 값을 el로 받아주는데 focus를 얻었을 때, blur가 되었을 때 classList를 통해 class에 active 값을 추가, 삭제할 수 있다.

 

input = 값이 변경되었을 때

change = 상태가 변경되었을 때

input요소에 글자를 입력하면 target 즉 이벤트 요소가 console에 출력된다.

 

 

data 객체데이터 할당

id , pw 속성이 있는데 target은 formEl을 가리키므로

formEl 의 첫번째 요소는 input 태그 즉 id를 가리키고

두번쨰 요소는 두번째 input 태그 즉 pw를 가리킨다.

 

form 요소를 사용할 필요는 없지만 사용하게 되면 submit, reset 이벤트를 사용하기 쉽다.

 

formEl.addEventListerner('reset', event => {console.log('reset')})은 event가 발생했을 때 콘솔로그를 띄워주는 형식이다.

반응형

'Javascript Study' 카테고리의 다른 글

모던자바스크립트 Deep Dive - 4장(변수)  (0) 2024.02.08
Javascript - Web API  (1) 2023.11.21
Javascript 이벤트(추가, 삭제, 객체, 옵션, 버블링, 위임)  (2) 2023.09.09
DOM(Node, Element, 생성 , 검색, 수정)-(1)  (0) 2023.09.06
비동기(Callback, Promise, Await, Async)  (2) 2023.09.04
'Javascript Study' Related Articles more