▼ HTML, JavaScript 문서

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #form{
    border: 1px solid #000;
  }
  input{
    margin: 10px;
  }
</style>
<body>
  <div id="form">
    <h1 class="title">sign up</h1>
    <input type="text" id="username" class="input" placeholder="Username">
    <input type="password" id="password" class="input" placeholder="Password">
    <input type="button" id="submit" class="btn" value="Sign in">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Stay Signed in</label>
  </div>
  <script src="index.js"></script>
</body>
</html>

Document

sign up

Stay Signed in

HTMl 태그들 중에서 input 태그는 타양한 타입들을 가지고 있다.

위 로그인창을 보면 일반적으로 글을 입력하는 텍스트 타입과

입력값을 자동으로 가려주는 패스워드 타입,

단순한 클릭이 가능한 버튼 타입,

클릭을 통해서 선택과 해지가 가능한 체크박스 타입등을 가지고 있다.

이 밖에도 다양한 타입들이 있지만 평소에 많이 접하는 타입은 이 정도라고 볼 수 있는데

이러한 input 태그를 다룰 때 활용할 수 있는 이벤트들이 존재한다.

input 태그 이벤트 - focus

다른 태그들과 다르게 input 태그는

태그의 이름 그대로 입력의 역할을 하기 때문에 사용자의 키보드나 마우스 동작에 반응하는 특징이 있다.

그래서 HTML 문서를 실행해서 로그인창을 보면

input 태그 하나 클릭해보면 검은 테두리로 강조되는데

이것이 사용자의 반응할 준비가 되었다는 뜻이며

이 상황을 focus되었다 라고 표현한다

▼ focusin, focusout

그래서 form이라는 id를 가진 태그에다가 focusin, focusout 타입으로

이벤트 타입과 타겟을 출력해주는 핸들러를 적용해볼 수 있다.

const el = document.querySelector("#form");

function printEventType(e) {
  console.log("type:", e.type);
  console.log("target:", e.target);
  console.log("---------");
}

el.addEventListener("focusin", printEventType);
el.addEventListener("focusout", printEventType);

결과를 확인하기위해 콘솔을 열어보면

input 태그에 focus가 되면 focusin

그리고 다른 요소로 focus가 옮겨지면 focusout과 focusin이 같이 발생하는 것을 볼 수 있다.

▼ focus, blur

또한 focus이벤트에는 똑같은 원리로 동작하는 focus와 blur 이벤트가 존재한다.

이 두 이벤트는 버블링이 되지 않는 특징을 가지고 있으며

이벤트 타입을 focus와 blur로 코드를 수정하고 살펴보면

input태그에 focus가 일어나도 이벤트 핸들러가 작동하지 않는다. (직접 콘솔창에서 확인해보기)

const el = document.querySelector("#form");

function printEventType(e) {
  console.log("type:", e.type);
  console.log("target:", e.target);
  console.log("---------");
}

// el.addEventListener("focusin", printEventType);
// el.addEventListener("focusout", printEventType);
el.addEventListener("focus", printEventType);
el.addEventListener("blur", printEventType);

왜냐하면 form id를 가진 태그 자체는 일반 div 태그이기 때문에 focus가 작동하지 않고

focus와 blur 이벤트는 버블링이 일어나지 않기 때문에 이벤트 위임을 활용하지 못한 결과라고 볼 수 있는 것

그래서 요소에 접근하는 대상을 form id를 가진 요소가 아니라

좀 더 구체적으로 focus가 가능한 username으로 바꿔주면

username id를 가진 태그에 한해서 focus와 blur 이벤트가 동작하는 것을 확인할 수 있다.

// const el = document.querySelector("#form");
const el = document.querySelector("#username");

function printEventType(e) {
  console.log("type:", e.type);
  console.log("target:", e.target);
  console.log("---------");
}

// el.addEventListener("focusin", printEventType);
// el.addEventListener("focusout", printEventType);
el.addEventListener("focus", printEventType);
el.addEventListener("blur", printEventType);

지금처럼 여러 개의 input 태그가 있을 떄

이벤트를 다루는 효율을 생각하면 focusin과 focusout을 사용하는 것이 효과적이겠지만

focus와 blur가 필요한 상황이 생길 수도 있으니 참고하는 것이 좋다.

input 태그 이벤트 - 입력

▼ input, change

input과 change는 입력과 관련된 이벤트로써

input은 말 그대로 사용자가 어떤 값을 입력하는 순간에 이벤트가 발생하고

change는 요소의 값이 변했을 때 이벤트가 발생한다.

const el = document.querySelector("#form");

function printEventType(e) {
  console.log("type:", e.type);
  console.log("target:", e.target);
  console.log("---------");
}

el.addEventListener("focusin", printEventType);
el.addEventListener("focusout", printEventType);
el.addEventListener("input", printEventType);
el.addEventListener("change", printEventType);

결과를 확인하기위해 input 태그를 클릭하면 먼저 focusin이 발생하고

어떤 값을 입력하는 순간 input 타입 이벤트가 발생한다.

뭔가 키보드 이벤트와 비솟해보이지만

input은 말 그대로 어떤 값이 입력될 때 발생하기 때문에

esc나 shift같은 입력과 관련 없는 key에는 이벤트가 발생하지 않는다.

이러한 특징을 이용하여 상황에 맞게 이벤트를 적절히 활용할 수 있다.

그런데 요소의 값이 변했을 때 발생한다는 change 이벤트는 발생하고 있지 않은데,

간혹 값을 입력할 때 이 input 태그의 안에 값이 변한다고 해서

input 이벤트 타입과 change 이벤트 타입이 같은 원리로 동작한다고 생각할 수 있지만 전혀 그렇지 않다.

change 이벤트는 입력이 시작되기 전 값과

완료되었을 때 값 사이에 차이가 있을 때만 발생하기에

처음 input 태그에 foucus를 두고 어떤 값을 입력할 때는

input 태그의 값이 입력 중인 상태로 평가되기 때문에

최종적으로 입력이 완료되었다는 암시를 주어야 한다.

일반적으로 아이디 input에서 패스워드 input으로 focus가 빠져나갈 때 입력이 완료됐다고 판단해서

change 이벤트가 focusout 직전에 발생한다.▽

좀 더 쉽게 말하자면..
아이디 입력하고 엔터누르면 "입력이 끝났다" 라고 인식하기 때문에 change 이벤트 발생하고
아이디 입력하고 tab키 누르면 change 발생한다.

그러면 focusout이나 혹은 blur 이벤트와 비슷해 보이는데

둘이 차이점은 실제로 값이 변했을때 발생하기 때문에

그냥 focus만 왔다 갔다하면 change 이벤트가 발생하지 않는다.▽

이렇게 input 태그를 다루는 이벤트를 사용해봤는데

input과 change, 다양한 focus 이벤트들을 다양한 방면으로 활용할 수 있다.

▼GitHub

https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/interactive_JS/23.input%ED%83%9C%EA%B7%B8

JavaScript_soloPlay/interactive_JS/23.input태그 at main · SeopE9611/JavaScript_soloPlay

Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.

github.com

'JS' 카테고리의 다른 글

(1) Modern JavaScript - 데이터 타입의 특징과 종류 (0)	2024.11.19
(22) Interactive JavaScript (Event) - 스크롤 이벤트 (0)	2024.11.18
(20) Interactive JavaScript (Event) - 키보드 이벤트 (0)	2024.11.14
(19) Interactive JavaScript (Event) - 마우스 이동 이벤트 (0)	2024.11.13
(18) Interactive JavaScript (Event) - 마우스 버튼 이벤트 (0)	2024.11.12

(21) Interactive JavaScript (Event) - input 태그

sign up

input 태그 이벤트 - focus

input 태그 이벤트 - 입력

'JS' 카테고리의 다른 글

티스토리툴바