[자바 스크립트] 11. 이벤트 종류

Apr 04, 2025


<!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");
            }
        });

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

</html>

See more posts

[자바 스크립트] 11. 이벤트 종류

More articles

[자바 스크립트] 13. 숨기기

[자바 스크립트] 12. 로그인 이벤트

[자바 스크립트] 10. 이벤트 리스너

[자바 스크립트] 9. 이벤트 기본