자바스크립트 마우스 DOM 이벤트 (onmouseover, onmouseout, onmousedown, onclick)
자바스크립트를 활용한 DOM 이벤트에 대한 설명글입니다. 가장 쉬운 형태로 마우스 이벤트가 있습니다. 특정 태그 영역에 마우스가 들어갔을 때, 빠져나왔을 때, 클릭하는 중, 클릭 완료 후의 이벤트를 별도로 지정 가능합니다. 어떻게 하는지 바로 알아봅시다.
미리보기
See the Pen JavaScript Mouse Event by rgy0409 (@rgy0409) on CodePen.
일단 형태는 위와 같습니다. 빨간색 상자안에 마우스를 올려보세요. 텍스트가 변합니다. 이번에는 빠져나와보세요. 또 텍스트가 바뀝니다. 클릭하는 도중과 클릭 완료 후에도 텍스트 변화가 있습니다. 이렇게 각 4개의 상황이 각기 다릅니다.
HTML 설명
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script>
function mover() {
var M
M = document.getElementById("test01");
M.innerText = "마우스 들어옴";
}
function mout() {
var M
M = document.getElementById("test01");
M.innerText = "마우스 나감";
}
function mclick() {
var M
M = document.getElementById("test01");
M.innerText = "마우스 클릭";
}
function mc() {
var M
M = document.getElementById("test01");
M.innerText = "마우스 클릭 완료";
}
function mformat() {
var M
M = document.getElementById("test01");
M.innerText = "마우스 이벤트";
}
</script>
|
cs |
우선 <head>안쪽에 세팅된 스크립트입니다. 보시면 아시겠지만 모두 function 함수명만 각각 다르게 만들어주고 해당 안의 변수 M은 같습니다. 나머지도 대부분 같은데 대신 변수 M의 출력 텍스트만 각기 다릅니다. 따라서 마우스의 각 상황에 대해서 최종적으로 만들어주고 싶은 상황만 바꿔주면 되는 것입니다. CSS 제이쿼리를 써도 됩니다.
 |
| 이렇게 하면 됨! |
|
1
2
|
<div id="test01" onmouseover="mover()" onmouseout="mout()" onmousedown="mclick()" onclick="mc()">마우스 이벤트</div>
<input type="button" value="초기화" onclick="mformat()">
|
cs |
그리고 <body>를 유심히 잘 보시면 아시겠지만 DOM 이벤트는 모두 div 태그 안에 세팅되어 있습니다. 각 객체에 대한 설명은 다음과 같습니다.
onmouseover : 마우스 커서가 지정 영역에 올라와 있을 때
onmouseout : 마우스 커서가 지정 영역을 빠져나왔을 때
onmousedown : 지정 영역에서 마우스 클릭 중일 때
onclick : 지정 영역에서 마우스 클릭 완료일 때
이렇게 이해하시면 됩니다. 참고로 onclick은 button 태그 안에도 있는데 함수가 다릅니다. 따라서 해당 태그안에서 지정된 onclick 이벤트는 입력된 함수명으로 동작하게 됩니다. 이 부분만 이해하시면 DOM 이벤트를 사용하는데 큰 어려움은 없을 것이라고 생각합니다. 오늘 내용 끝!
댓글
댓글 쓰기
비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.