왕진 블로그
반응형
Web Development · JavaScript
JavaScript 마우스 이벤트
mousedown, mouseup, mouseover, mouseout, wheel, contextmenu, 좌표 프로퍼티를 비교합니다.
시작 오늘 분석할 코드
이 예제는 이벤트가 발생하는 시점에 따라 코드를 실행하는 방법을 다룹니다. 문서가 로드된 직후, 버튼을 클릭했을 때, 이미지가 로드된 뒤, 마우스를 움직이거나 휠을 굴릴 때처럼 서로 다른 이벤트 시점을 비교합니다.
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>마우스 관련 리스너</title> <script> let width=1; // 테두리 두께 function down(obj) { obj.style.fontStyle = "italic"; } function up(obj) { obj.style.fontStyle = "normal"; } function over(obj) { obj.style.borderColor = "violet"; // 테두리 폭이 0일 때 색은 보이지 않는다. } function out(obj) { obj.style.borderColor = "lightgray"; } function wheel(e, obj) { // e는 이벤트 객체 if(e.wheelDelta < 0) { // 휠을 아래로 굴릴 때 width--; // 폭 1 감소 if(width < 0) width = 0; // 폭이 0보다 작아지지 않게 } else // 휠을 위로 굴릴 때 width++; // 폭 1 증가 obj.style.borderStyle = "ridge"; obj.style.borderWidth = width+"px"; } </script> </head> <body > <h3>마우스 관련 이벤트 리스너</h3> <hr> <div>마우스 관련 <span onmousedown="down(this)" onmouseup="up(this)" onmouseover="over(this)" onmouseout="out(this)" onwheel="wheel(event, this)" style="display:inline-block">이벤트 </span>가 발생합니다. </div> </body> </html> <!-- 다음 이벤트 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>oncontextmenu</title> <script> function hideMenu() { alert("오른쪽 클릭<컨텍스트 메뉴>금지"); return false; } document.oncontextmenu=hideMenu; </script> </head> <body> <h3>oncontextmenu에서 컨텍스트 메뉴 금지</h3> <hr> 마우스 오른쪽 클릭은 금지됩니다. 아무곳이나 클릭해도 컨텍스트 메뉴를 볼 수 없습니다.<br> <img src="media/beach2.png" alt="miami"> </body> </html> <!-- 다음 이벤트 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>마우스 이벤트 객체의 프로퍼티</title> <style> div { background : skyblue; width : 250px; } </style> </head> <body> <h3>마우스 이벤트 객체의 프로퍼티와 onmousemove</h3> <hr> 이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고, 마우스의 위치를 보여줍니다.<br><br> <img src="media/beach.png" onmousemove="where(event)"><br><br> <div id="div"></div> <script> let div = document.getElementById("div"); function where(e) { let text = "버튼=" + e.button + "<br>"; text += "(screenX, screenY)=" + e.screenX + "," + e.screenY + "<br>"; text += "(clientX, clientY)=" + e.clientX + "," + e.clientY + "<br>"; text += "(offsetX, offsetY)=" + e.offsetX + "," + e.offsetY + "<br>"; text += "(x, y)=" + e.x + "," + e.y + "\n"; div.innerHTML = text; } </script> </body> </html>
실제 출력 미리보기
마우스 관련 이벤트가 발생합니다.
clientX, clientY = 120, 80
offsetX, offsetY = 32, 18
offsetX, offsetY = 32, 18
용어 용어 정리
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 관계를 압니다. |
핵심 한 줄 요약
mouse event마우스 이벤트는 버튼 상태, 휠 방향, 포인터 좌표를 이벤트 객체로 전달합니다.
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 폼 입력 요소 — onfocus·radio·checkbox 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 이미지 변경 — new Image 프리로딩·select 완전 정리 (0) | 2026.07.05 |
| JavaScript onload · eval 계산기 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 취소 — preventDefault·return false 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 객체·흐름 — 캡처·버블링 완전 정리 (0) | 2026.07.05 |
댓글