왕진 블로그
반응형
Web Development · JavaScript
JavaScript onload와 onclick 계산기
문서 로드 완료 시점, 버튼 클릭 계산, 이미지 로딩 완료 후 크기 출력 흐름을 정리합니다.
시작 오늘 분석할 코드
이 예제는 이벤트가 발생하는 시점에 따라 코드를 실행하는 방법을 다룹니다. 문서가 로드된 직후, 버튼을 클릭했을 때, 이미지가 로드된 뒤, 마우스를 움직이거나 휠을 굴릴 때처럼 서로 다른 이벤트 시점을 비교합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML 문서의 onload</title> </head> <body onload="alert('이 사이트는 2022년 9월1일부터 \ www.js.co.kr로 옮겨지게 됩니다.')"> <h3>HTML 문서의 로딩 완료, onload</h3> <hr> 이 페이지는 onload 리스너의 사용 예를 보여줍니다 이 페이지가 출력되고 난 바로 직후 onload 리스너를 통해 경고창을 출력합니다. </body> </html> <!-- 다음 이벤트 예제 --> <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>onclick</title> <script> function calculate() { let exp = document.getElementById("exp"); let result = document.getElementById("result"); result.value = eval(exp.value); } </script> </head> <body > <h3> onclick, 계산기 만들기</h3> <hr> 계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요. <br> <br> <form> 식 <input type="text" id="exp" value=""><br> 값 <input type="text" id="result"> <input type="button" value=" 계산 " onclick="calculate()"> </form> </body> </html> <!-- 다음 이벤트 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onload로 이미지 크기 출력</title> <script> function changeImage() { let sel = document.getElementById("sel"); let img = document.getElementById("myImg"); img.onload = function () { // 이미지 크기 출력 let mySpan = document.getElementById("mySpan"); mySpan.innerHTML = img.width + "x" + img.height; } let index= sel.selectedIndex; // 선택된 옵션 인덱스 img.src = sel.options[index].value; // <option>의 value 속성 // 이미지 로딩 시작, 완료 후 onload 리스너 호출 } </script> </head> <body onload="changeImage()"> <h3>onload로 이미지 크기 출력</h3> <hr> <form> <select id="sel" onchange="changeImage()"> <option value="media/apple.png">사과 <option value="media/banana.png">바나나 <option value="media/mango.png">망고 </select> <span id="mySpan">이미지 크기</span> </form> <p><img id="myImg" src="media/apple.png" alt="."></p> </body> </html>
실제 출력 미리보기
식
값
선택 이미지 크기: 320x240
용어 용어 정리
onload문서나 이미지 등 리소스 로딩이 완료된 뒤 실행되는 이벤트입니다.
onclick요소를 클릭했을 때 실행되는 이벤트입니다.
onwheel마우스 휠을 굴렸을 때 발생하는 이벤트입니다.
oncontextmenu마우스 오른쪽 클릭 메뉴가 열리기 직전에 발생하는 이벤트입니다.
eval문자열을 JavaScript 코드처럼 실행하는 함수입니다. 학습용 외에는 주의가 필요합니다.
offsetX이벤트 대상 요소 안에서의 마우스 x 좌표입니다.
1 이벤트 시점 구분
언제 실행되는 코드인가?
이벤트 코드는 “무엇을 하는가”보다 “언제 실행되는가”를 먼저 봐야 합니다. onload는 준비 완료 시점, onclick은 클릭 시점, onmousemove는 포인터 이동 시점입니다.
| 이벤트 | 실행 시점 | 대표 용도 |
|---|---|---|
| onload | 문서/이미지 로드 완료 | 초기화, 크기 측정 |
| onclick | 클릭 | 계산, 버튼 실행 |
| onwheel | 휠 회전 | 확대, 두께 조정 |
| onmousemove | 마우스 이동 | 좌표 표시 |
| oncontextmenu | 오른쪽 클릭 메뉴 요청 | 기본 메뉴 차단 |
2 onload 초기화
문서의 onload는 HTML이 화면에 준비된 뒤 실행됩니다. 이미지의 onload는 이미지 파일이 실제로 로드된 뒤 실행되므로 width와 height를 안전하게 읽을 수 있습니다.
body onload
페이지 전체가 로드된 직후 초기 안내나 초기화 함수를 실행합니다.
img.onload
선택한 이미지의 로딩이 끝난 뒤 실제 표시 크기를 출력합니다.
3 onclick 계산기와 eval
계산기 예제는 입력 칸의 문자열을 eval()로 계산합니다. 간단한 학습용으로는 직관적이지만, 사용자가 입력한 문자열을 그대로 실행하므로 실제 서비스에서는 매우 조심해야 합니다.
let exp = document.getElementById("exp"); let result = document.getElementById("result"); result.value = eval(exp.value);
eval은 임의 코드 실행 위험이 있어 실무 계산기에서는 직접 파서를 만들거나 허용된 문자만 검증해야 합니다.
반응형
4 마우스 버튼과 상태 변화
마우스 이벤트 예제에서는 누르는 동안 글자를 italic으로 바꾸고, 손을 떼면 normal로 되돌립니다. over/out에서는 테두리 색을 바꿔 포인터가 요소 안에 있는지 보여줍니다.
| 이벤트 | 변경 | 해석 |
|---|---|---|
| mousedown | fontStyle = italic | 누르고 있는 상태 |
| mouseup | fontStyle = normal | 누름 해제 |
| mouseover | borderColor = violet | 요소 위로 진입 |
| mouseout | borderColor = lightgray | 요소 밖으로 나감 |
5 wheelDelta와 테두리 두께
휠 이벤트에서는 wheelDelta 값을 보고 위로 굴렸는지 아래로 굴렸는지 판단합니다. 예제는 휠 방향에 따라 전역 변수 width를 늘리거나 줄여 테두리 두께를 바꿉니다.
1
휠 이벤트 발생사용자가 요소 위에서 휠을 굴립니다.
2
방향 판단wheelDelta가 0보다 작은지 확인합니다.
3
두께 변경width 값을 증가 또는 감소시킵니다.
4
스타일 적용borderWidth에 width + "px"를 대입합니다.
6 마우스 좌표 프로퍼티
마우스 이벤트 객체는 여러 좌표를 제공합니다. 화면 전체 기준인지, 브라우저 창 기준인지, 요소 내부 기준인지에 따라 쓰임이 다릅니다.
| 프로퍼티 | 기준 | 사용 상황 |
|---|---|---|
| screenX/screenY | 모니터 화면 | 전체 화면 기준 위치 |
| clientX/clientY | 브라우저 viewport | 화면 안 포인터 위치 |
| offsetX/offsetY | 이벤트 대상 요소 | 이미지 내부 좌표 |
| x/y | 브라우저 구현에 따른 별칭 | 간단한 좌표 확인 |
7 컨텍스트 메뉴 차단
document.oncontextmenu = hideMenu처럼 등록하면 페이지에서 오른쪽 클릭 메뉴가 열리기 전에 함수가 실행됩니다. 이 함수가 false를 반환하면 기본 컨텍스트 메뉴가 열리지 않습니다.
function hideMenu() { alert("오른쪽 클릭<컨텍스트 메뉴>금지"); return false; } document.oncontextmenu = hideMenu;
우클릭 차단은 사용자 경험을 해칠 수 있으므로 학습 목적 외에는 신중하게 사용해야 합니다.
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 이미지 src 변경 후 바로 크기 읽기 | 이전 이미지 크기나 0이 출력될 수 있습니다. | img.onload 안에서 width와 height를 읽습니다. |
| eval을 검증 없이 사용 | 사용자 입력이 코드로 실행될 수 있습니다. | 학습용으로만 쓰고 실제 서비스에서는 제한합니다. |
| wheelDelta 방향 혼동 | 휠 방향과 반대로 두께가 바뀝니다. | 콘솔로 값을 확인하고 조건을 맞춥니다. |
| 좌표 기준 혼동 | 마우스 위치가 예상과 다르게 표시됩니다. | screen, client, offset 기준을 구분합니다. |
| return false 누락 | 우클릭 메뉴가 계속 열립니다. | oncontextmenu 리스너에서 false를 반환합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 로드 시점 | 문서 onload와 이미지 onload 차이를 압니다. |
| 클릭 처리 | onclick으로 함수가 실행되는 흐름을 설명합니다. |
| 마우스 상태 | down, up, over, out 이벤트 차이를 구분합니다. |
| 좌표 출력 | client와 offset 좌표 기준을 구분합니다. |
| 기본 메뉴 차단 | oncontextmenu와 return false 관계를 압니다. |
핵심 한 줄 요약
onloadonload는 문서나 이미지가 준비된 뒤 실행할 코드를 연결하는 이벤트입니다.
onload요소가 준비된 뒤 안전하게 초기화하거나 크기를 읽습니다.
mouse마우스 이벤트 객체는 버튼, 휠, 좌표 정보를 제공합니다.
default컨텍스트 메뉴 같은 기본 행동은 return false로 막을 수 있습니다.
Tags
#JavaScript #onload #onclick #mouse event #onwheel #oncontextmenu #event object #DOM #eval #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, onload, onclick, mouse event, onwheel, oncontextmenu, event object, DOM, eval, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript 이미지 변경 — new Image 프리로딩·select 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 마우스 이벤트 — 클릭·휠·좌표·우클릭 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 취소 — preventDefault·return false 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 객체·흐름 — 캡처·버블링 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 리스너 — 4가지 등록 방식 완전 정리 (0) | 2026.07.05 |
댓글