마우스가 개체 위에서 이동하였을 때 발생된다.


이벤트 속성
object.onmousemove=handler JScript 만-
object.onmousemove=GetRef('handler') VBScript 5.0-
인라인 HTML <ELEMENT onmousemove="handler"> 모든 플랫트폼
명명된 스크립트 <SCRIPT for=object event=onmousemove> Explorer-
용법
이벤트가 발생되면 'JavascriptCode'를 실행한다.
Javascript 에서는
objName.onmousemove='JavascriptCode'
HTML 에서는
<ELEMENT onMouseMove="JavascriptCode">
이벤트 특성
Bubbles 있슴
취소 불가
발생 원인 문서 위에서 마우스가 이동할 때.
디폴트 작용 이벤트와 연관된 작용을 시작한다.
HTML 규격 HTML 4.0 규격

DHTML 개체 모델에서 이벤트처리자는 파라메터들을 직접 받지는 못해도, event개체의 쿼리를 사용할 수 있다.

altKey ALT 키가 눌렸는가를 반환하거나 설정한다.
altLeft 왼쪽 ALT 키가 눌렸는가를 반환하거나 설정한다.
cancelBubble 현재 이벤트가 이벤트처리자들의 계통도에서 버블업(bubble up)하여야 하는가를 반환하거나 설정한다.
clientX 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수평 좌표를 반환하거나 설정한다.
clientY 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수직 좌표를 반환하거나 설정한다.
ctrlKey CTRL 키가 눌렸는가를 반환하거나 설정한다.
ctrlLeft 왼쪽 CTRL 키가 눌렸는가를 반환하거나 설정한다.
offsetX 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수평 좌표를 반환하거나 설정한다.
offsetY 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수직 좌표를 반환하거나 설정한다.
screenX 사용자 스크린에 상대적인 마우스포인터의 수평 위치를 반환하거나 설정한다.
screenY 사용자 스크린에 상대적인 마우스포인터의 수직 위치를 반환하거나 설정한다.
shiftKey SHIFT 키가 눌렸는가를 반환하거나 설정한다.
shiftLeft 왼쪽 SHIFT 키가 눌렸는가를 반환하거나 설정한다.
srcElement 이벤트를 발생시킨 개체를 반환하거나 설정한다.
type 이벤트 개체의 이벤트 명칭을 반환하거나 설정한다.
x 상대적으로 위치한 모체 개체에 상대적인 위치 수평 좌표를 반환하거나 설정한다.
y 상대적으로 위치한 모체 개체에 상대적인 위치 수직 좌표를 반환하거나 설정한다.
특기

onmouseover 이벤트에서와 거의 같은데, onmousemove 이벤트는 마우스가 개체 위에서 이동할 때 발생되는 것만 다르다.

클릭된 마우스의 내용을 알기 위해서는 button 속성을 사용한다.

적용
개체scriptHTMLIE


onmousemove, onmousedown, onmouseup 이벤트 예제

마우스를 눌렀다 놓아 보고 마우스를 이동시켜 보라
결과 표시창

구별하기 쉽게 만든 예제를 보면, 마우스를 눌렀을 때(onmousedown)은 노랑색 배경이 나타나고, 놓으면(onmouseup) 하늘색 배경이 나타나는데, 마우스를 누르고 이동(onmousemove)하던가, 누르지 않고 이동(onmousemove)하면 초록색 배경이 나타난다.

<DIV onMouseDown="this.style.backgroundColor='#ffff00';show.innerHTML=event.type"
  onMouseUp="this.style.backgroundColor='#00ffff';show.innerHTML=event.type"
  onMouseMove="this.style.backgroundColor='#00ff00';show.innerHTML=event.type"
  onMouseOut="this.style.backgroundColor='#ffffff';show.innerHTML=event.type"
  style="width:400;border:solid 1 blue;padding:4px">마우스를 눌렀다 놓아 보고 마우스를 이동시켜 보라</DIV>
<DIV id=show>결과 표시창</DIV>

onmousemove 이벤트 예제

여기서 마우스를 이동시켜 보라.
정보 표시창
<SCRIPT>
function DoTry(){
  showC.innerHTML='event.clientX='+event.clientX+', event.clientY='+event.clientY+'<BR>event.type='+event.type;
}
</SCRIPT>
<DIV id=captCode style="border:solid 1 green;background:pink;padding:3em;width:400"
  onmousemove="DoTry()" onmouseOver="DoTry()" onmouseOut="DoTry()">여기서 마우스를 이동시켜 보라.</DIV>
<DIV id=showC style="border:solid 1 blue;background:dfd;padding:5;height:3.4em;width:400">정보 표시창</DIV>