JavaScript onmousemove · onblur · radio 이미지 완전 정리

 

 

Web Development · JavaScript

JavaScript 마우스 커서 · 라디오 이미지

포커스 이벤트, 마우스 좌표 추적, 라디오 버튼 이미지 변경을 정리합니다.

시작 오늘 분석할 코드

이 폴더의 예제는 이전 산수 게임을 이벤트와 타이머로 확장합니다. 사용자가 직접 버튼을 누르는 흐름뿐 아니라 시간이 지나면 자동으로 채점되는 흐름, 키보드 입력 이벤트, 마우스 이동과 이미지 변경 이벤트를 함께 다룹니다.

window.onblur = function(e) { document.body.style.backgroundColor = "lightgray"; } window.onfocus = function(e) { document.body.style.backgroundColor = "white"; } document.onmousemove = function(e) { cursor.style.left = event.clientX + "px"; cursor.style.top = event.clientY + "px"; } function printImage(imgFile) { let img = document.getElementById("img"); img.src = imgFile; }

onblur창이 포커스를 잃을 때 발생합니다.

onfocus창이 포커스를 얻을 때 발생합니다.

onmousemove마우스가 움직일 때 발생합니다.

clientX뷰포트 기준 마우스 x 좌표입니다.

checked라디오 버튼 선택 여부입니다.

img.src이미지 파일 경로를 지정합니다.

---

1 포커스 이벤트

window.onblur는 브라우저 창이 포커스를 잃을 때, window.onfocus는 다시 포커스를 얻을 때 실행됩니다. 원본은 배경색을 바꿔 상태를 보여줍니다.

onblur

브라우저 바깥을 클릭하면 lightgray 배경으로 바뀝니다.

onfocus

다시 브라우저를 클릭하면 white 배경으로 돌아옵니다.

---

2 마우스 커서 이미지

onmousemove 예제는 절대 위치 div 안에 이미지를 넣고, 마우스 좌표에 맞춰 div의 left/top을 바꿉니다.

mousemove

→

clientX/clientY

→

left/top 변경

속성	의미	주의
position:absolute	좌표로 위치 지정	left/top이 적용됩니다.
clientX	뷰포트 기준 x 좌표	px 단위를 붙여야 합니다.
clientY	뷰포트 기준 y 좌표	px 단위를 붙여야 합니다.
zIndex	겹침 순서	높을수록 위에 보입니다.

---

3 event와 e

원본 함수는 매개변수로 e를 받지만 내부에서는 event.clientX를 사용합니다. 현대 코드에서는 전달받은 e를 쓰는 편이 명확합니다.

event.clientX

브라우저 전역 event에 기대는 방식입니다.

e.clientX

핸들러로 전달받은 이벤트 객체를 명확히 사용합니다.

document.onmousemove = function(e) { cursor.style.left = e.clientX + "px"; cursor.style.top = e.clientY + "px"; };

---

 

반응형

 

4 라디오 버튼 이미지 출력

라디오 버튼 예제는 선택된 과일의 value를 이미지 파일 경로로 사용합니다. 클릭하면 printImage(this.value)가 실행되어 img 태그의 src가 바뀝니다.

요소	역할	예시
radio	하나의 선택지	바나나, 망고, 사과
name	같은 그룹 묶기	friuts
value	이미지 파일 경로	media/apple.png
checked	초기 선택	사과 선택
img.src	표시 이미지 변경	선택한 과일 이미지

---

5 초기 이미지 찾기

printInitImage()는 페이지가 열릴 때 checked 상태인 라디오 버튼을 찾습니다. 찾은 버튼이 있으면 그 value로 이미지를 출력합니다.

1

라디오 목록 가져오기getElementsByName으로 같은 name을 가진 요소를 모읍니다.

2

checked 확인반복문으로 선택된 항목을 찾습니다.

3

found 저장찾은 라디오 버튼을 변수에 담습니다.

4

이미지 출력found.value를 img.src에 넣습니다.

---

6 friuts 오타 주의

원본은 name 값을 friuts로 적고 JavaScript에서도 같은 이름으로 찾습니다. 철자는 fruits가 맞지만, 코드에서는 HTML과 JS 이름이 일치하기 때문에 동작합니다.

오타 자체보다 더 중요한 것은 HTML의 name과 JavaScript의 getElementsByName 값이 반드시 같아야 한다는 점입니다.

---

7 자주 하는 실수

실수	증상	해결
px 단위 누락	커서 이미지가 움직이지 않습니다.	left/top에 "px"를 붙입니다.
position 누락	left/top이 적용되지 않습니다.	absolute 또는 fixed를 지정합니다.
event 객체 혼동	브라우저별 오류가 날 수 있습니다.	매개변수 e를 사용합니다.
name 불일치	초기 선택을 찾지 못합니다.	HTML name과 JS 문자열을 맞춥니다.
이미지 경로 오류	이미지가 표시되지 않습니다.	value 경로와 실제 파일 위치를 확인합니다.

---

8 복습 체크리스트

체크	통과 기준
onblur	창이 포커스를 잃을 때 실행됨을 설명합니다.
onfocus	창이 다시 포커스를 얻을 때 실행됨을 설명합니다.
onmousemove	마우스 좌표로 요소 위치를 바꾸는 흐름을 압니다.
clientX/Y	뷰포트 기준 좌표임을 압니다.
radio	checked와 value 사용 흐름을 이해합니다.
img.src	이미지 표시 파일을 바꾸는 속성임을 압니다.

---

9 디버깅 포인트

확인	콘솔 예시	의미
좌표	console.log(e.clientX, e.clientY)	마우스 좌표가 들어오는지 확인합니다.
cursor 요소	console.log(cursor)	div를 제대로 찾았는지 봅니다.
라디오 목록	console.log(fruits.length)	name으로 요소를 찾았는지 확인합니다.
checked	console.log(fruits[i].checked)	선택 상태를 확인합니다.
이미지 경로	console.log(imgFile)	src에 들어갈 값이 맞는지 봅니다.

---

10 테스트 케이스

케이스	준비	예상 결과
브라우저 밖 클릭	다른 창 클릭	배경 lightgray
브라우저 안 클릭	예제 창 클릭	배경 white
마우스 이동	화면 안에서 이동	이미지 커서가 따라옴
사과 초기 선택	페이지 로드	사과 이미지 출력
망고 클릭	망고 라디오 선택	망고 이미지로 변경

---

10 개선 연습

마우스 커서와 라디오 이미지 예제는 이벤트 결과가 즉시 화면에 보이므로, 이벤트 객체와 DOM 속성 변경을 연습하기 좋습니다.

A

커서 위치 보정이미지가 실제 포인터를 가리지 않도록 left/top에 몇 px을 더합니다.

B

커서 숨김CSS cursor:none을 적용해 기본 커서를 숨겨봅니다.

C

이미지 크기 변경선택한 과일마다 width와 height도 같이 바꿔봅니다.

D

선택 설명 추가선택한 과일 이름을 텍스트로 함께 출력합니다.

개선	이유	확인 포인트
e 객체 사용	브라우저 호환성을 높입니다.	event 대신 e.clientX 사용
pointer-events none	커서 이미지가 클릭을 막지 않게 합니다.	아래 요소 클릭 가능
기본 이미지 지정	로드 직후 빈 이미지 방지	checked 항목과 src 일치
alt 변경	접근성을 개선합니다.	선택 이미지 설명 갱신
name 철자 정리	가독성을 높입니다.	fruits로 HTML/JS 모두 변경

---

11 이벤트 적용 범위

이 예제들은 이벤트를 어디에 붙이느냐가 다릅니다. window, document, input에 붙은 이벤트가 각각 어느 범위를 담당하는지 구분해야 합니다.

대상	이벤트	범위
window	onblur	브라우저 창 포커스 상실
window	onfocus	브라우저 창 포커스 획득
document	onmousemove	문서 안 마우스 이동
radio input	onclick	개별 선택지 클릭
body	onload	페이지 로드 완료 후 초기화

---

12 좌표 처리 세부사항

마우스 좌표는 기준이 여러 가지입니다. 원본처럼 화면에 보이는 영역 기준으로 커서를 따라다니게 할 때는 clientX, clientY가 가장 이해하기 쉽습니다.

좌표	기준	사용 상황
clientX	브라우저 viewport 왼쪽	화면 안 마우스 위치
clientY	브라우저 viewport 위쪽	화면 안 마우스 위치
pageX	문서 전체 왼쪽	스크롤 포함 위치
pageY	문서 전체 위쪽	스크롤 포함 위치
screenX	모니터 화면 왼쪽	장치 화면 기준 위치
screenY	모니터 화면 위쪽	장치 화면 기준 위치

문서가 스크롤되는 페이지라면 client 좌표와 page 좌표의 차이를 직접 콘솔로 찍어보면 이해가 빠릅니다.

---

13 이미지 경로 테스트

라디오 버튼 이미지는 value에 들어 있는 경로가 그대로 img.src로 들어갑니다. 이미지가 안 나오면 JavaScript보다 경로 문제를 먼저 확인하는 편이 빠릅니다.

확인	예시	해결
파일명	banana.png	실제 파일명과 대소문자를 맞춥니다.
폴더명	media/banana.png	HTML 기준 상대 경로를 확인합니다.
초기 src	src=""	onload에서 checked 이미지를 넣습니다.
alt	선택 이미지	선택에 맞게 설명을 바꿀 수 있습니다.
크기	width, height	이미지 비율이 깨지지 않게 조정합니다.

1

value 확인클릭한 라디오의 this.value를 콘솔에 출력합니다.

2

src 확인img.src가 예상 경로로 바뀌었는지 봅니다.

3

네트워크 확인브라우저 개발자도구에서 이미지 로드 실패를 확인합니다.

4

초기 선택 확인checked 라디오가 하나만 있는지 확인합니다.

---

핵심 한 줄 요약

focus창 포커스 상태에 따라 배경색을 바꿀 수 있습니다.

mouse마우스 좌표로 이미지 커서를 움직일 수 있습니다.

radio선택된 value를 img.src에 넣어 이미지를 바꿉니다.

Tags

#JavaScript#onmousemove#onblur#onfocus#radio#img.src#clientX#clientY#DOM#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, onmousemove, onblur, onfocus, radio, img.src, clientX, clientY, DOM, 티스토리