HTML 마우스 이벤트를 이용해 JavaScript 함수에서 마우스가 현재 div 태그에 들어와 있는지 나갔는지 현재 마우스 포인터의 x 좌표와 y 좌표를 표시해 주는 간단한 소스입니다.
<html>
<head>
<title>마우스 이벤트 감지 예제 소스</title>
<meta name="generator" content="notepad" />
<meta name="author" content="zzarungna" />
<style type="text/css">
div {
border:1px solid black;
width:500px; height:500px;
background-color:#c7cffc;
}
</style>
<script type="text/javascript">
function Test1(d) {
//마우스 들어왔을때
d.innerText = "마우스가 들어왔습니다.";
}
function Test2(d) {
//마우스 나갔을때
d.innerText = "마우스가 나갔습니다.";
}
function Test3(d) {
//마우스 이동할때
d.innerText = "마우스가 이동중입니다.";
d.innerText = "마우스가 현재 (" + event.x + "," + event.y + ")에 있습니다.";
}
function Test4(d) {
// 마우스 버튼이 눌려질때 왼쪽, 오른쪽 상관없음
d.innerText = "좌표:" + event.x + "," + event.y + " / 버튼 : " + event.button;
}
</script>
</head>
<body>
<div id="div1" onmouseover="Test1(this);" onmouseout="Test2(this);" onmousemove="Test3(this);" onmousedown="Test4(this)">
</div>
</body>
</html>소스를 복사해서 붙여 넣으시고 파일을 저장하실 땐 원하는 이름.html로 저장해 주세요.
저장한 파일을 실행해 보면 볼 수 있는 결과 화면입니다. div 태그 안 마우스 움직임을 감지해 단순히 텍스트를 출력하는 간단한 소스입니다.
HTML과 JavaScript를 사용해 마우스 이벤트를 감지하는 간단한 소스이니 필요하신 분들은 복사해서 사용하시면 됩니다.