-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript_event.html
More file actions
141 lines (107 loc) · 4.22 KB
/
javascript_event.html
File metadata and controls
141 lines (107 loc) · 4.22 KB
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Event</title>
<style>
h1 {
background-color: greenyellow;
}
h2 {
background-color: yellow;
}
* {
padding: 0;
margin: 0;
}
</style>
<script>
window.onload = function(){
// 이벤트 적용 : 캐스팅 -> 이벤트 속성에 핸들러를 할당
// h1 태그를 캐스팅
var header = document.getElementById('btn');
// 이벤트 속성에 핸들러 할당
header.onclick = function(){
alert('h1태그에 마우스 클릭!!!');
// 이벤트 제거
header.onclick = null;
};
document.getElementById('btn1').onclick = function(){
// document.getElementById('btn1').style.backgroundColor='black';
// document.getElementById('btn1').style.color='white';
// this. -> 이벤트가 발생한 객체를 가리킨다.
this.style.backgroundColor = 'black';
this.style.color = 'white';
};
//버튼A 버튼B 를 클릭할 때 클릭횟수를 화면에서 출력
// 버튼과 출력 영역을 캐스팅
var btnA = document.getElementById('btnA');
var btnB = document.getElementById('btnB');
var cntA = document.getElementById('cntA');
var cntB = document.getElementById('cntB');
// 버튼에 클릭이벤트 연결
btnA.onclick = function(){
//카운트를 증가시키고 화면을 갱신
var cnt = Number(cntA.innerText) + 1;
cntA.innerText = cnt;
};
btnB.onclick = function(){
//카운트를 증가시키고 화면을 갱신
// var cnt = Number(cntB.innerText) + 1;
cntB.innerText = Number(cntB.innerText) + 1;
// 이벤트 강제 발생
btnA.onclick();
};
// // form 태그 캐스팅
var form = document.getElementById('myForm');
form.onsubmit = function(){
console.log('submit 이벤트');
var id = document.getElementById('userID').value;
//console.log(typeof id, id);
if(id.length<1){
alert('아이디를 입력해주세요');
return false;
}
};
var p1 = document.getElementById('p1');
p1.onclick = function(e){
var event = e || window.event;
alert('p Click');
// IE 일때
event.cancelBubble = true;
// IE 이외의 브라우저일때
if(event.stopPropagation) {
event.stopPropagation();
}
}
}
function mClick() {
alert("클릭했어요.");
}
</script>
</head>
<body>
<div style= " border: 2px solid green;" onclick="alert('DIV1')">
<div style= " border: 2px solid blue;" onclick="alert('DIV2')">
<h1 style= " border: 2px solid yellow;" onclick="alert('H1')">
<p id="p1" style=" border: 2px solid red; width:50%; background-color: red;">클릭하세요.</p>
</h1>
</div>
</div>
<form id="myForm" action="http://www.naver.com" method="POST">
id <input type="text" id="userID" name="userID"><br>
pw <input type="password" id="pw"name="userPW"><br>
<input type="submit" value="로그인">
</form>
<button id="btnA">ButtonA</button>
<input id="btnB" type="button" value="ButtonB">
<!-- <input type="submit" value="ButtonC"> -->
<h3>Button A - <span id="cntA">0</span></h3>
<h3>Button B - <span id="cntB">0</span></h3>
<h1 id="btn">Click</h1>
<h2 onclick="mClick();">클릭 !!!!</h2>
<h1 id="btn1">클릭하세요</h1>
</body>
</html>