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

More articles

See more posts

[JS] 7. json

April 1, 2025
[JS] 7. json

[JS] 6. DOM 조작

April 1, 2025
[JS] 6. DOM 조작

[프로그래머스] (MySQL) 31. 나이 정보가 없는 회원 수 구하기

March 31, 2025
[프로그래머스] (MySQL) 31. 나이 정보가 없는 회원 수 구하기

[프로그래머스] 39. 9로 나눈 나머지

March 31, 2025
[프로그래머스] 39. 9로 나눈 나머지

jjack1

RSS·Powered by Inblog