Today I Learned
Java Script
Event
- keyboard ์ด๋ฒคํธ
- keydown : key๋ฅผ ๋๋ ์ ๋, ํน์ํค ํฌํจ
- keypress : key๋ฅผ ๋๋ ์ ๋, ํน์ํค ์ ์ธ
- keyup : key๋ฅผ ๋๋ ๋ค๊ฐ ๋์ ๋
- form ์ด๋ฒคํธ
- focus : ์ ๋ ฅ ๋๊ธฐ ์ํ
- blur : focus ์์์ ๋
- submit : form์ ์๋ฒ๋ก ์์ฒญ ๋ฐ์
- reset : form ๋ด๋ถ์ ๋ฐ์ดํฐ๋ฅผ ์ด๊ธฐํ
- change : ๊ฐ์ด ๋ณ๊ฒฝ๋์์ ๋
๋ด์ฅ ๊ฐ์ฒด
- Object : ์ต์์ ๊ฐ์ฒด
- String : ๋ฌธ์์ด ๋ค๋ฃจ๋ ๊ฐ์ฒด
1) length : ๋ฌธ์์ด์ ๊ธธ์ด
์์ ์์ค ์ฝ๋
๋๋ณด๊ธฐ
1) event2.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#d1 {
width: 70%;
height: 200px;
background-color: lightblue;
margin: 0 auto;
}
.c1 {
background-color: red;
}
</style>
</head>
<body>
<h1>Event 2</h1>
<div id="d1"></div>
<input type="text" id="d2">
<input type="text" id="d3">
<input type="text" id="d4">
<span id="result"></span>
<script src="./event2.js"></script>
</body>
</html>event2.js
const d1 = document.getElementById('d1');
const d2 = document.getElementById('d2');
const d3 = document.getElementById('d3');
const d4 = document.getElementById('d4');
const result = document.getElementById('result');
d1.addEventListener("mouseenter", function() {
console.log("enter");
});
d1.addEventListener("mouseleave", function() {
console.log("leave");
});
d2.addEventListener("keydown", function() {
console.log("keydown");
});
d3.addEventListener("keypress", function() {
console.log("keypress");
});
d4.addEventListener("keyup", function() {
let v = d4.value.length;
v = v * 100;
result.innerHTML = v + "์";
});
2) event3.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.f1 {
border: 1px solid magenta;
background-color: skyblue;
}
</style>
</head>
<body>
<h1>Event 3</h1>
<form name="frm">
<input type="text" name="n1" id="id1">
<input type="text" name="n2" id="id2">
<input type="text" name="n3" id="id3">
</form>
<script src="./event3.js"></script>
</body>
</html>
event3.js
const id1 = document.getElementById('id1');
//on์ด๋ฒคํธ๋ช
//id1.addEventListener("focus", {}); ์ ๋์ผ
id1.onfocus = function() {
//console.log('focus');
id1.className = 'f1';
}
id1.onblur = function() {
console.log('blur');
}728x90
