이벤트 속성
마우스가 개체 위에서 이동하였을 때 발생된다.
이벤트 속성 |
object.onmousemove=handler | JScript 만- |
|---|---|---|
| object.onmousemove=GetRef('handler') | VBScript 5.0- | |
| 인라인 HTML | <ELEMENT onmousemove="handler"> | 모든 플랫트폼 |
| 명명된 스크립트 | <SCRIPT for=object event=onmousemove> | Explorer- |
| 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 속성을 사용한다.
| 개체 | script | HTML | IE |
|---|
구별하기 쉽게 만든 예제를 보면, 마우스를 눌렀을 때(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>
<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>