Binary World

자바스크립트 이벤트(Event) 04 본문

개발자의 길/Javascript

자바스크립트 이벤트(Event) 04

모쿠 2017. 4. 7. 15:08

<자바스크립트 이벤트>


<30_event.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
#para {
    border: 1px solid grey;
    width: 200px;
    height: 100px;
    font-size: 2em;
    text-align: center;
}
</style>
</head>
<body>
 
<h1>HTML 마우스 이벤트</h1>
<P id="para" onmouseover="mouseOver(this)"
  onmousedown="mouseDown(this)"
  onmouseup="mouseUp(this)"
  onmouseout="mouseOut(this)">
마우스를 올려 보세요......
</P>
 
<script type="text/javascript">
// onmouseover: 마우스 커서가 영역 위로 올라왔을 때
// -> 배경색 바꿈. "마우스를 눌러주세요..." 라고 변경
function mouseOver(para) {
    para.style.backgroundColor = 'lightpink';
    para.innerHTML = '마우스를 눌러주세요...';
}
 
// onmousedown: 마우스를 누르고 아직 up이 안 된 상태
// -> 글자색을 흰색으로 바꿈. "마우스 up하세요..." 변경
function mouseDown(para){
    para.style.color = 'white';
    para.innerHTML = '마우스 up하세요...';
}
 
// onmouseup: 마우스를 눌렀다가 뗐을 때(down->up)
// -> 배경색 바꿈. "마우스를 옮겨주세요..." 변경
function mouseUp(para){
    para.style.color = 'green';
    para.innerHTML = '마우스를 옮겨주세요...';
}
 
// onmouseout: 마우스가 해당 영역을 벗어났을 때
// -> 처음 로딩상태로 변경
function mouseOut(para){
    para.style.color = 'black';
    para.style.backgroundColor = 'white';
    para.innerHTML = '마우스를 올려 보세요......';
}
</script>
 
</body>
</html>
cs



<출력화면>




저작자표시 비영리

'개발자의 길 > Javascript' 카테고리의 다른 글

자바스크립트 이벤트(Event) 06  (0) 2017.04.07
자바스크립트 이벤트(Event) 05  (0) 2017.04.07
자바스크립트 이벤트(Event) 03  (0) 2017.04.07
자바스크립트 이벤트(Event) 02  (0) 2017.04.07
자바스크립트 이벤트(Event) 01  (0) 2017.04.07
'개발자의 길/Javascript' Related Articles more
Comments