[JavaScript] 07. 이벤트

Apr 01, 2025

Contents

1. HTML요소에 직접 이벤트 핸들러 등록 2. addEventListener() 사용하여 이벤트 핸들러 등록 3. 이벤트 종류들 4. form 이벤트 예제

1. HTML요소에 직접 이벤트 핸들러 등록


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>이벤트</h1>
    <hr />
    <button onclick="m1()">클릭</button>
    <div onclick="m2()">클릭2</div>

    <script>
      function m1() {
        // window 객체는 생략 가능함
        //window.alert("m1 호출됨");
        alert("m1 호출됨");
      }
      function m2() {
        alert("m2 호출됨");
      }
    </script>
  </body>
</html>

2. addEventListener() 사용하여 이벤트 핸들러 등록


<!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>
  <body>
    <h1>이벤트 리스너</h1>
    <hr />
    <button id="btn1">클릭</button>

    <script>
      let btn1 = document.querySelector("#btn1");

      btn1.addEventListener("click", (event) => {
        console.log(event);
        alert("btn1 호출됨");
      });
    </script>
  </body>
</html>

3. 이벤트 종류들

💡

click - 클릭

dblclick - 더블클릭

keyup - 키보드입력(키보드를 땠을 때)

change - tab 키를 사용하거나 select 태그를 사용하여 값이 바뀐 후


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이벤트 예제</title>
  </head>

  <body>
    <h1>이벤트 종류</h1>
    <hr />

    <!-- click -->
    <button id="btn1">클릭</button>

    <!-- dblclick -->
    <button id="btn2">더블 클릭</button>

    <!-- keyup -->
    <input type="text" id="textInput" placeholder="키보드 입력해 보세요" />

    <!-- change -->
    <select id="selectBox">
      <option value="">선택하세요</option>
      <option value="apple">🍎 사과</option>
      <option value="banana">🍌 바나나</option>
      <option value="grape">🍇 포도</option>
    </select>

    <script>
      // click
      let btn1 = document.querySelector("#btn1");
      btn1.addEventListener("click", (e) => {
        console.log("click 이벤트:", e);
        alert("btn1 클릭됨");
      });

      // dblclick
      let btn2 = document.querySelector("#btn2");
      btn2.addEventListener("dblclick", () => {
        alert("btn2 더블 클릭됨");
      });

      // keyup
      let value = "";
      let input = document.querySelector("#textInput");
      input.addEventListener("keyup", (e) => {
        console.log("입력된 키:", e.key);
        value += e.key;
        console.log(value);
        if (value.length > 4) {
          alert("그만입력하세요");
        }
      });

      // change
      let select = document.querySelector("#selectBox");
      select.addEventListener("change", (e) => {
        console.log(e);
        alert("선택한 값: " + e.target.value);
      });
    </script>
  </body>
</html>

4. form 이벤트 예제

💡

valid()

조건에 따라 true 혹은 false 값을 리턴하는 함수를 만들어 사용할 수 있다.

onsubmit=""

폼 내부에 있는 제출버튼(submit)을 클릭할 때 발생하는 이벤트로, action을 통해 데이터를 넘기기 전 한 번 더 값을 검증하는 용도로 사용할 수 있다.

💡

강제로 input 태그 안의 value값을 바꿔 제출할 가능성이 있다.

이 상태로 회원가입을 하면 데이터베이스 관리가 어려워지기때문에 이를 막기 위해

valid() 와 onsubmit="" 를 통해 검증을 한 번 더 해야할 필요가 있다.


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .hidden-box {
        display: none;
      }

      .red-text {
        font-size: 10px;
        color: red;
      }
    </style>
  </head>

  <body>
    <h1>폼 이벤트</h1>
    <hr />
    <form action="/join" onsubmit="return valid()">
      <input type="text" id="password" /><br />
      <input type="text" id="password-check" /><br />
      <div id="pw-same" class="hidden-box red-text">패스워드가 동일합니다</div>
      <div id="pw-not-same" class="hidden-box red-text">
        패스워드가 동일하지 않습니다
      </div>
      <button type="submit">회원가입</button>
    </form>

    <script>
      let pw = document.querySelector("#password");
      let pwCheck = document.querySelector("#password-check");

      function valid() {
        if (pw.value == pwCheck.value) {
          return true;
        } else {
          alert("패스워드가 동일해야 합니다");
          return false;
        }
      }

      pw.addEventListener("keyup", (e) => {
        if (pw.value == pwCheck.value) {
          pw.readOnly = true;
          document.querySelector("#pw-same").classList.remove("hidden-box");
          document.querySelector("#pw-not-same").classList.add("hidden-box");
        } else {
          pw.readOnly = false;
          document.querySelector("#pw-same").classList.add("hidden-box");
          document.querySelector("#pw-not-same").classList.remove("hidden-box");
        }
      });

      pwCheck.addEventListener("keyup", (e) => {
        if (pw.value == pwCheck.value) {
          pw.readOnly = true;
          document.querySelector("#pw-same").classList.remove("hidden-box");
          document.querySelector("#pw-not-same").classList.add("hidden-box");
        } else {
          pw.readOnly = false;
          document.querySelector("#pw-same").classList.add("hidden-box");
          document.querySelector("#pw-not-same").classList.remove("hidden-box");
        }
      });
    </script>
  </body>
</html>