[자바스크립트] 11. 이벤트 종류 (click, dbclick, keyup, change)

Apr 02, 2025

[자바스크립트] 11. 이벤트 종류 (click, dbclick, keyup, change)

Contents


<!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("글자수 5");
          value = ""; // 초기화
        }
      });

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

1. click 이벤트


btn1.addEventListener("click", (e) => {
  console.log("click 이벤트:", e);
  alert("btn1 클릭됨");
});

버튼을 클릭했을 때 호출되는 이벤트.

클릭 정보를 콘솔에 출력하고, 경고창(alert)을 띄움.

2. dblclick 이벤트


btn2.addEventListener("dblclick", () => {
  alert("btn2 더블 클릭됨");
});

버튼을 더블 클릭했을 때 호출되는 이벤트.

click과는 다르게, 빠르게 두 번 클릭해야 발생함.

3. keyup 이벤트


input.addEventListener("keyup", (e) => {
  console.log("입력된 키:", e.key);
  value += e.key;
  console.log(value);

  if (value.length > 4) {
    alert("글자수 5");
    value = ""; // 초기화
  }
});

키보드를 누르고 손을 뗄 때 발생하는 이벤트.

입력된 키 값을 value 변수에 계속 누적해서 저장함.

글자 수가 5를 넘으면 경고창을 띄우고, value를 초기화함.

4. change 이벤트


select.addEventListener("change", (e) => {
  console.log(e);
  alert("선택한 값: " + e.target.value);
});

<select> 요소의 값이 변경될 때 호출되는 이벤트.

변경된 값을 콘솔에 출력하고, 경고창으로 표시함.

[자바스크립트] 11. 이벤트 종류 (click, dbclick, keyup, change)

click, dblclick, keyup, change 이벤트