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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90 |
<!-- 이벤트 객체 예제1-1 (파이어폭스, 크롬, 사파리, 오페라, IE 9 이상) -->
<script type="text/javascript">
document.onkeydown=function(e){
alert(e);
}
</script>
<!-- 이벤트 객체 예제1-2 (IE 8 이하) -->
<script type="text/javascript">
document.onkeydown=function(e){
alert(window.event);
}
</script>
<!-- 이벤트 객체 예제1-3 (모든 브라우저) -->
<script type="text/javascript">
document.onkeydown=function(e){
var eventObj=e?e:window.event;
alert(eventObj);
}
</script>
<!-- 이벤트 객체 예제2 -->
<script type="text/javascript">
window.onload=function(){
var form1=document.f1;
var form2=document.f2;
var eventObj;
document.onmousemove=function(e){
eventObj=e?e:window.event;
var cx=eventObj.clientX;
var cy=eventObj.clientY;
form1.client_x.value=cx;
form1.client_y.value=cy;
var px=eventObj.pageX;
var py=eventObj.pageY;
form1.pg_x.value=px;
form1.pg_y.value=py;
}
form2.key.onkeydown=function(e){
eventObj=e?e:window.event;
form2.code.value=eventObj.keyCode;
if(eventObj.ctrlKey==true && eventObj.keyCode==71) {
alert("단축키 실행");
}
}
}
</script>
</head>
<body>
<div id="wrap">
<h1>마우스 이벤트 객체 속성</h1>
<form action="#" method="get" name="f1">
<fieldset>
<legend>커서 위치 추적</legend>
<p>
<label for="client_x">clientX</label>
<input type="text" name="client_x" id="client_x" />
</p>
<p>
<label for"pg_x">pageX</label>
<input type="text" name="pg_x" id="pg_x" />
</p>
<p>
<label for="client_y">clientY</label>
<input type="text" name="client_y" id="client_y" />
</p>
<p>
<label for"pg_y">pageY</label>
<input type="text" name="pg_y" id="pg_y" />
</p>
</fieldset>
</form>
<h1>키보드 이벤트 객체 속성</h1>
<form action="#" method="get" name="f2">
<fieldset>
<legend>키 코드값</legend>
<p>
<label for="#">입력 키보드 :</label>
<input type="text" name="key" id="key" />
<label for="">유니코드값 :</label>
<input type="text" name="code" id="code" />
</p>
</fieldset>
</form>
</div>
</body>
</html> |
cs |
소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
728x90
그리드형(광고전용)
'Source Code > JavaScript' 카테고리의 다른 글
| [JavaScript] 디데이 카운터(D-Day Counter) 만들기 (0) | 2022.05.09 |
|---|---|
| [JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현) (0) | 2022.04.27 |
| [JavaScript] Scroll Indicator 구현하기 (0) | 2022.04.12 |
| Checkbox, Radio, Select에서 선택된 항목 출력하기 (0) | 2020.11.05 |
| this를 사용한 이벤트 (0) | 2017.05.21 |
| 이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0) | 2017.05.21 |
| 이벤트 (Event) (0) | 2017.05.21 |
| 함수를 사용하여 사진 갤러리 만들기 (0) | 2017.05.21 |
