inblog logo
|
jjack1
    JavaScript

    [JS] 5. 이벤트

    최재원's avatar
    최재원
    Apr 01, 2025
    [JS] 5. 이벤트
    Contents
    1. 이벤트 등록 방법1. html 에 이벤트 등록2. 자바스크립트로 이벤트 등록2. 이벤트의 종류1. 기본적인 이벤트2. 폼 이벤트

    1. 이벤트 등록 방법

    1. html 에 이벤트 등록

    <!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 onclick="m1()">클릭</button>
        <div onclick="m2()">클릭2</div>
        <script>
            function m1() {
                // window 객체는 생략 가능
                window.alert("m1 호출됨");
            }
            function m2() {
                // window 객체는 생략 가능
                window.alert("m2 호출됨");
            }
        </script>
    </body>
</html>
    notion image
    html에 이벤트를 등록하면 요소 자신이 자신을 지켜보면서 이벤트를 감지함
    id가 바뀌는 경우가 생기면 이 방식이 좋다 예) 리액트

    2. 자바스크립트로 이벤트 등록

    <!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", (e) => {
                console.log(e);
                alert("btn1 호출됨");
            });
        </script>
    </body>
</html>
    notion image
    자바스크립트로 이벤트를 등록하면 외부의 스레드가 요소를 지켜보면서 이벤트를 감지함

    2. 이벤트의 종류

    1. 기본적인 이벤트

    1. 클릭 이벤트

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

    2. 더블클릭 이벤트

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

    3. 키보드 입력 이벤트

    <input type="text" id="textInput" placeholder="키보드 입력해 보세요" />
<script>
// keyup
let input = document.querySelector("#textInput");
input.addEventListener("keyup", (e) => {
    console.log("입력된 키:", e.key);
    alert("키보드 입력 받음");
});
</script>
    notion image

    4. 변화 인벤트

    <select id="selectBox">
    <option value="">선택하세요</option>
    <option value="apple">🍎 사과</option>
    <option value="banana">🍌 바나나</option>
    <option value="grape">🍇 포도</option>
</select>
<script>
// change
let select = document.querySelector("#selectBox");
select.addEventListener("change", (e) => {
    console.log(e);

    alert("선택한 값: " + e.target.value);
});
</script>
    notion image

    전체 코드

    <!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 input = document.querySelector("#textInput");
            input.addEventListener("keyup", (e) => {
                console.log("입력된 키:", e.key);
                alert("키보드 입력 받음");
            });

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

    2. 폼 이벤트 

    <!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="pw-box hidden-box red-text">
                패스워드가 동일합니다
            </div>
            <div id="pw-not-same" class="pw-box 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 {
                    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>
    notion image
    Share article
    Contents
    1. 이벤트 등록 방법1. html 에 이벤트 등록2. 자바스크립트로 이벤트 등록2. 이벤트의 종류1. 기본적인 이벤트2. 폼 이벤트

    jjack1

    RSS·Powered by Inblog