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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<style type="text/css">
    #div1 { font-size: 20px; font-weight: bold; margin: 2opx; }
    #img1 { width: 600px; }
    
    .cats { border: 10px solid gray; }
</style>
 
<script type="text/javascript">
 
    //<body onload="">
    //    - 브라우저가 문서의 내용을 모두 읽은 직후에 발생하는 이벤트
    //    - <body>태그의 내의 모든 내용을 브라우저가 읽은 뒤.,
    //    - 모든 태그에 접근 가능한 시점(*******)
    //    - 문서 초기화 역할(자바 : 생성사 역할)
    
    //마우스 관련 이벤트
    //1. onmouseover : 마우스 커서가 객체위에 올라가는 시점에 발생
    //2. onmouseout : 마우스 커서가 객체위에 빠져나가는 시점에 발생
    //3. onmousedown : 마우스 버튼을 눌렀을 때 발생
    //              a. : 마우스 버튼의 종류
    //              b. : 마우스 커서의 좌표
    
    
    
    /* 전역공간 */
    var img1;
    var div1;
    var cats = new Array();
    
    
    function init() {
        
        img1 = document.getElementById("img1");
        div1 = document.getElementById("div1");
        
        
        img1. onmouseover = function() {
            div1.innerText = "마우스가 올라갔습니다.";
        };
        
        img1. onmouseout = function() {
            div1.innerText = "마우스가 빠져나갔습니다.";
        }; 
        
        img1.onmousedown = function() {
            //div1.innerText = "마우스 버튼을 눌렀습니다.";
            //div1.innderText = event.button;
            
            //마우스 커서의 좌표
            //1. clientX, clientY
            //    : 문서 좌측 상단을 기준
            //2. screenX, screenY
            //    : 화면 좌측 상단을 기준
            //3. offsetX, offsetY
            //    : 이벤트 발생 객체의 좌측 상단을 기준
            
            //div.innerText = event.clientX + " , " + event.clientY;
            //div.innerText = event.screenX + " : " + event.screenY;
            //div.innerText = event.offsetX + " : " + event.offsetY;            
        };
        
        
            img1.onmouseup = function() {
                div1.innerText = "mouseup : " + event.offsetX + " : " + event.offsetY;
            } 
                    
            img1.onmousemove = function() {
                div1.innerText = "mousemove : " + event.offsetX + " : " + event.offsetY;
            } 
        
            
        var index = 0;
        //동적
        for (var i=0; i<document.images.length; i++) {
            //1. alert(img.getAttribute("class"));
            //2. alert(img.className);
            
            var img = document.images[i];
            
            if (img.className == "cats") {
                
                
                cats[index]    = img;
                index++;
                
                
                //img.style.border = "10px dotted orange";
                img.onmouseover = function(){
                    event.srcElement.style.border = "10px solid green";
                }
                
                img.onmouseout = function(){
                    event.srcElement.style.border = "10px solid gray";    
                }
            }//그냥 오렌지로 바꾸는게 아니고 if(클래스네임이 cats만 찾아서)걸어서!
            
        }
        
        
        //[키보드이벤트] 문서상에서 키보드를 누르면.,
        document.onkeydown = function() {
            //alert(event.keyCode);
            //숫자 패드 키
            //1(97) ~ 9(105)
            cats[event.keyCode - 97].style.border = "10px solid yellow";
        };
        
        document.onkeyup = function() {
            cats[event.keyCode - 97].style.border = "10px solid gray";
        };
        
        
         
    }//init();
 
    
    
    
    function test1() {
        
        //해당 이벤트를 발생시킨 태그(객체) -> 자바] this연산자
        event.srcElement.style.border = "10px solid blue";
    }
    
    function test2() {
        event.srcElement.style.border = "10px solid gray";
    }
 
    
    
    
    /* 키보드 */    
    function test3() {
        
        //키(보드) 이벤트
        //1. onkeydown*
        //    - 키를 눌렀을 때
        //    - '물리키'에 반응
        //    - 문자 이외의 키에도 반응
        
        //2. onkeyup
        //    - 키를 뗄 때
        //    - 물리키에 반응
        //    - 문자 이외의 키에도 반응
        
        //3. onkeypress
        //    - 키를 눌렀을 때
        //    - '문자키'에 반응(아스키문자)
        //    - 문자 이외의 키에는 반응 없음
        
        
        //document.getElementById("div1").innerText = "키를 눌렀습니다.";
        document.getElementById("div1").innerText = event.keyCode;
    }
    
    function test4() {
        document.getElementById("div1").innerText = event.keyCode;        
    }
    
    function test4() {
        //document.getElementById("txtb").value = "첫번째 박스에서 키 눌림";
        document.getElementById("txtb").value = document.getElementById("txta").value;
    }
    
    
    
    
</script>
 
 
</head>
<body onload="init();"> <!-- 정적 이벤트 두번째 방법 : body에 onload걸기-->
 
 
    <!-- ex15.htm -->
 
 
 
    
    <input type="text" id="txta" size="60"
            onkeyup="test4();" /><br />
    <input type="text" id="txtb" size="60" /><br />
    <hr />
    
    <input type="text" id="txt1" onkeydown="test3();" onkeypress="test4();" />
    <hr />
 
    
    <div id="div1"></div>
    <img src="images/wall08.jpg" id="img1" />
 
    
    <hr />
    <!-- img.cats[src='images/catty$$.png']*9 -->
    <!-- 
    <img src="images/catty01.png" alt="" class="cats" onmouseover="test1();" onmouseout="test2();" />
    <img src="images/catty02.png" alt="" class="cats" onmouseover="test1();" onmouseout="test2();" /> 
    -->
    
    <img src="images/catty01.png" alt="" class="cats" />
    <img src="images/catty02.png" alt="" class="cats" />
    <img src="images/catty03.png" alt="" class="cats" /><br />
    <img src="images/catty04.png" alt="" class="cats" />
    <img src="images/catty05.png" alt="" class="cats" />
    <img src="images/catty06.png" alt="" class="cats" /><br />
    <img src="images/catty07.png" alt="" class="cats" />
    <img src="images/catty08.png" alt="" class="cats" />
    <img src="images/catty09.png" alt="" class="cats" />
    <hr />
    
    
    <!--  
        onclick 이벤트
        - 마우스 이벤트 X
    -->
    <input type="button" value="클릭" onclick="alert('click');" />
    
    
    <script type="text/javascript">
        /*
        document.getElementById("img1").onmouseover = function() {
            document.getElementById("div1").innerText = "마우스가 올라갔습니다.";    
        };    정적 이벤트 첫번째 방법 : 초기상태에서 걸기 */
    </script>
    
    
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22
태그 조작  (0) 2016.01.22
태그 검색  (0) 2016.01.22
BOM test  (0) 2016.01.22

+ Recent posts

티스토리툴바