728x90
728x170
|
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
59
60
61
62
63
64 |
<!-- 이벤트 예제1 -->
<script type="text/javascript">
var color=["white","yellow","aqua","purple"];
var i=0;
function colorBg(){
i++;
if(i>=color.length) i=0;
var bodyTag=document.getElementByTagName("body")[0];
bodyTag.style.backgroundColor=color[i];
}
window.onload=function(){
var btn2=document.getElementById("btn2");
btn2.onclick=function(){ colorBg(); }
var btn3=document.getElementById("btn3");
btn3.onmouseover=function(){ colorBg(); }
}
</script>
</head>
<body>
<p>
<button onclick="colorBg();">버튼1</button>
</p>
<p><button id="btn2">버튼2</button></p>
<p>
<button onmouseover="colorBg();">버튼3</button>
</p>
<p><button id="btn3">버튼3</button></p>
</body>
</html>
<!-- 이벤트 예제2 -->
<script type="text/javascript">
var color=["white","yellow","aqua","purple"];
var i=0;
function colorBg(){
i++;
if(i>=color.length) i=0;
var bodyTag=document.getElementByTagName("body")[0];
bodyTag.style.backgroundColor=color[i];
}
window.onload=function(){
var btn2=document.getElementById("btn2");
btn2.onclick=function(){ colorBg(); }
// 마우스가 없을 경우 Tab 키를 사용해 이용할 수 있도록 키보드 대응 이벤트 onfocus 추가
var btn3=document.getElementById("btn3");
btn3.onmouseover=btn3.onfocus=function(){ colorBg(); }
}
</script>
</head>
<body>
<p>
<button onclick="colorBg();">버튼1</button>
</p>
<p><button id="btn2">버튼2</button></p>
<p><button id="btn3">버튼3</button></p>
<p>
<button onmouseover="colorBg();" onfocus="colorBg();">버튼4</button> <!-- onfocus 추가 -->
</p>
</body>
</html>
</script> |
cs |
소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
728x90
그리드형(광고전용)
'Source Code > JavaScript' 카테고리의 다른 글
| Checkbox, Radio, Select에서 선택된 항목 출력하기 (0) | 2020.11.05 |
|---|---|
| 이벤트 객체 (Event Object) (0) | 2017.05.21 |
| this를 사용한 이벤트 (0) | 2017.05.21 |
| 이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0) | 2017.05.21 |
| 함수를 사용하여 사진 갤러리 만들기 (0) | 2017.05.21 |
| 함수 (Function) (1) | 2017.05.21 |
| 문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기 (0) | 2017.05.21 |
| 폼 요소 선택자 (0) | 2017.05.21 |
