JavaScript) 이벤트 정리: onload / onblur / onchange / keydown / 마우스 이벤트

Front/JavaScript

JavaScript) 이벤트 정리: onload / onblur / onchange / keydown / 마우스 이벤트

pogun 2025. 2. 24. 10:10

1. onload - 페이지 로딩 완료 시 실행

: onload 이벤트는 페이지가 완전히 로드된 후 실행

: body 태그에 적용하면 HTML, CSS, JavaScript가 모두 로드된 후 실행

<body onload="checkMessage()">
<script>
    function checkMessage() {
        console.log('onload 실행');
    }
</script>
</body>

1-1. 최신 문법 (DOMContentLoaded 사용)

: window.onload보다는 DOMContentLoaded 이벤트를 사용하는 것이 더 적절하다.

document.addEventListener("DOMContentLoaded", () => {
    console.log('onload 실행');
});

2. onblur - 입력 필드에서 포커스가 벗어날 때 실행

: 사용자가 입력 필드에서 다른 곳을 클릭해 포커스를 이동하면 실행

: 주로 유효성 검사(예: 나이 입력 확인)에 사용

age: <input type="text" size="10" maxlength="2" onblur="isRegAge()"/>세<br/>
<script>
    function isRegAge() {
        console.log("isRegAge()");
    }
</script>

2-1. 최신 문법 ( addEventListener 사용 )

document.querySelector("input[type='text']").addEventListener("blur", () => {
    console.log("isRegAge()");
});

3. onchange - 입력값 변경 후 포커스가 이동하면 실행

: <input>이나 <select> 값이 변경된 후 다른 곳을 클릭하면 실행

: 사용자가 값을 입력하고 즉시 실행되는 것이 아니라, 포커스가 벗어난 후 실행됨에 주의!

<input type="text" size="5" maxlength="3" onchange="isPostNum(this)"/>
<script>
    function isPostNum(post) {
        if (post.value.match(/[^0-9]/g)) {
            alert('숫자가 아닌 문자가 포함되어 있습니다');
            post.value = "";
        }
    }
</script>

3-1. 최신 문법 ( input 이벤트 사용 - 입력 즉시 체크 )

: onchange 대신 input 이벤트를 사용하면 입력하는 순간 유효성을 검사를 할 수 있다.

document.querySelector("input[type='text']").addEventListener("input", (event) => {
    if (event.target.value.match(/[^0-9]/g)) {
        alert('숫자가 아닌 문자가 포함되어 있습니다');
        event.target.value = "";
    }
});

4. onkeydown, onkeypress - 키 입력 이벤트

: onkeydown : 키가 눌리는 순간 실행

: onkeypress : 문자 키(a-z, 0-9 등) 입력 시 실행 ( !!!keyCode는 최신 브라우저에서 지원 중단됨!!! )

document.getElementsByName("title")[0].onkeydown = function (event) {
    console.log("keycode: " + event.keyCode);
};

4-1. 최신 문법 ( keydown + event.key 사용 )

: 최신 브라우저에서는 keyCode 대신 event.key를 주로 사용

document.querySelector("[name='title']").addEventListener("keydown", (event) => {
    console.log("입력된 키:", event.key);
});

: event는 이벤트 핸들러 함수에서 자동으로 전달되는 객체

: 사용자가 키보드를 누르거나, 마우스를 클릭하는 등의 이벤트가 발생할 때 브라우저가 자동으로 제공하는 정보를 담고 있다.

: 예를 들어, keydown 이벤트에서 event 객체는 어떤 키가 눌렸는지, Shift, Ctrl 같은 보조 키가 눌렸는지 등의 정보를 포함하고 있다.

: event.key는 사용자가 누른 키의 값을 문자열로 반환하는 속성

: 예를 들어, 사용자가 A 키를 누르면 event.key 값은 "a" 또는 "A"(CapsLock 여부에 따라 달라짐)이 된다.

document.addEventListener("keydown", (event) => {
    console.log(event.key); // 속성 (값을 반환)
    event.preventDefault(); // 함수 (동작 실행)
});

event → 이벤트 객체 (이벤트 관련 정보를 담고 있음)

event.key → 속성(property) (값을 저장하는 변수처럼 동작)

event.preventDefault() → 함수(function) (동작을 수행하는 메서드)

5. 마우스 이벤트 (onmousedown, onmouseup, onmouseover, onmouseout)

onmousedown : 마우스를 누를 때 실행

onmouseup : 마우스를 뗄 때 실행

onmouseover : 마우스를 올릴 때 실행

onmouseout : 마우스를 벗어날 때 실행

<input type="image" src="./images/san0.gif" 
    onmousedown="mousedown(this)"
    onmouseup="mouseup(this)"
    onmouseover="mouseover(this)"
    onmouseout="mouseout(this)"/>

<script>
function mousedown(car) {
    car.src = "./images/san1.gif";
}
function mouseup(car) {
    car.src = "./images/san0.gif";
}
function mouseover(car) {
    car.src = "./images/san2.gif";
}
function mouseout(car) {
    car.src = "./images/san0.gif";
}
</script>

5-1. 최신 문법 ( addEventListener 사용 )

const img = document.querySelector("input[type='image']");

img.addEventListener("mousedown", () => img.src = "./images/san1.gif");
img.addEventListener("mouseup", () => img.src = "./images/san0.gif");
img.addEventListener("mouseover", () => img.src = "./images/san2.gif");
img.addEventListener("mouseout", () => img.src = "./images/san0.gif");

6. onmouseover / onmouseout - 링크에 이미지 변경 이벤트 적용

<a href="#" onmouseover="mouseoverOne()" onmouseout="mouseoutOne()">
    <img alt="" src="./images/box.gif" name="box">            
</a>

<script>
function mouseoverOne() {
    document.box.src = "./images/surprise.gif";
}

function mouseoutOne() {
    document.box.src = "./images/box.gif";
}
</script>

: document.box는 HTML에서 직접 지정되지 않아 최신 브라우저에서는 동작하지 않을 수 있음!!!

6-1. 최신 문법 ( querySelector 사용 )

const boxImg = document.querySelector("a img");

boxImg.parentElement.addEventListener("mouseover", () => {
    boxImg.src = "./images/surprise.gif";
});

boxImg.parentElement.addEventListener("mouseout", () => {
    boxImg.src = "./images/box.gif";
});

'Front > JavaScript' 카테고리의 다른 글

JavaScript) 타이머 활용: 텍스트 점멸 / 한 글자씩 출력 / 문자열 스크롤 효과 (0)	2025.02.24
JavaScript) DOM 조작 정리: childNodes / appendChild / removeChild / NodeList 활용 (0)	2025.02.24
JavaScript) 데이터를 받아 처리하는 방법 / FormData와 fetch() 활용 방법 / GET과 POST 차이 (0)	2025.02.23
JavaScript) 내비게이션과 HTML 페이지 이동 (0)	2025.02.23
JavaScript) 문자열 다루기 : 길이 측정, 특정 문자 검색, 자르기, 비교 등 (0)	2025.02.21

현재글JavaScript) 이벤트 정리: onload / onblur / onchange / keydown / 마우스 이벤트

pogun 코딩 공부 저장소