๐ปEvent๐ป
- ๊ฐ์ฒด์์ ๋ฐ์ํ๋ ์ฌ๊ฑด
- ์ธ์ ๋ฐ์ํ ์ง ์์ธก ๋ถ๊ฐ๋ฅํ๋ค.
๐ปEvent Handling๐ป
- ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌ ๋ฐ ๋ฑ๋กํ๋ค.
- ์ธ์ ๋ฐ์ํ ์ง ์์ธก ๋ถ๊ฐ๋ฅํ ์ฌ๊ฑด์ ๋๋นํ์ฌ ๋ฏธ๋ฆฌ ์ฒ๋ฆฌํ ์ฝ๋๋ฅผ ์ค๋นํ๋ค.
- ์ฌ๊ฑด์ด ๋ฐ์ํ๋ฉด ์ค๋นํ ์ฝ๋๋ฅผ ์๋์ผ๋ก ์คํํ ์ ์๋ค.
- ์ค๋ผํด์ ํธ๋ฆฌ๊ฑฐ ๊ฐ๋ ๊ณผ ์ ์ฌํ๋ค.
์ด๋ฒคํธ ๋ฑ๋ก
- onXXX ์์ฑ(ํ๋กํผํฐ)๋ก ์ ๊ณตํ๋ค.
1. ์ ์ ์ด๋ฒคํธ
- HTML ํ๊ทธ์ ์ ์ฉํ๋ค.
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="button" name="btn2" onclick="m1()">
</form>
<script>
function m1() {
window.document.form1.txt1.value='ํ๊ธธ๋';
}
</script>btn2 ํด๋ฆญ์, text box์ 'ํ๊ธธ๋' ์ฝ์ ๋๋ค.
2. ๋์ ์ด๋ฒคํธ
- ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ฌ์ฉํ๋ค.
<body>
<h1>Event</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="button" name="btn3">
</form>
<script>
window.document.form1.btn3.onclick = m2; //ํจ์ ํฌ์ธํฐ(ํจ์์ ์์น ๊ฐ์ ๋ฃ๋๋ค)
function m2() {
window.document.form1.txt1.value='๋์ ';
}
</script>
</body>btn3 ํด๋ฆญ์, text box์ 'ํ๊ธธ๋' ์ฝ์ ๋๋ค.
๐ป๋ง์ฐ์ค ์ด๋ฒคํธ๐ป
- onmouseXXX ์ผ๋ก ์ ๊ณตํ๋ค.
1. onmouseover / onmouseenter
ํด๋น ๊ฐ์ฒด ์์ญ์์ ๋ง์ฐ์ค ์ปค์๊ฐ ์ง์ ํ๋ ์๊ฐ ๋ฐ์ํ๋ค.
2. onmouseout / onmouseleave
ํด๋น ๊ฐ์ฒด ์์ญ์์ ๋ง์ฐ์ค ์ปค์๊ฐ ๋น ์ ธ๋๊ฐ๋ ์๊ฐ ๋ฐ์ํ๋ค.
3. onmousedown
ํด๋น ๊ฐ์ฒด ์์ญ์์ ๋ง์ฐ์ค ๋ฒํผ์ ๋๋ฅด๋ ์๊ฐ ๋ฐ์ํ๋ค.
4. onmouseup
ํด๋น ๊ฐ์ฒด ์์ญ์์ ๋ง์ฐ์ค ๋ฒํผ์ ๋ผ๋ ์๊ฐ ๋ฐ์ํ๋ค.
5. onmousemove
ํด๋น ๊ฐ์ฒด ์์ญ์์ ๋ง์ฐ์ค ์ปค์ ์์ง์ผ ๋ ๋ฐ์ํ๋ค.
onmouseover / onmouseout ์์
<body>
<script>
<h1>๋ง์ฐ์ค ๊ด๋ จ ์ด๋ฒคํธ</h1>
<form name="form1">
<textarea name="txt1"></textarea>
</form>
var txt1 = window.document.form1.txt1;
txt1.onmouseover = m1;
txt1.onmouseout = m2;
function message(txt){
var now = new Date();
txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
}
function m1() {
message('mouseover');
}
function m2() {
message('mouseout');
}
</script>
</body>
textarea ์์ญ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด mouseover ๊ฐ ์๋๋์ด 'mouseover'๊ฐ ์ฐํ๊ณ
์์ญ ๋ฐ์ผ๋ก ๋ฒ์ด๋๋ฉด mouserout์ด ์๋๋์ด 'mouserout'์ด ์ฐํ๋ค.
event.buttons
- ์ด๋ค ๋ง์ฐ์ค ๋ฒํผ์ ๋๋ ๋์ง ์ซ์๋ก ๋ฐํํ๋ค.
- 1(์ผ์ชฝ) , 2(์ค๋ฅธ์ชฝ), 3(๊ฐ์ด๋ฐ), 4(์ผ์ชฝ+ํ ), 5(์ค๋ฅธ์ชฝ+ํ ), 6(์ผ์ชฝ+์ค๋ฅธ์ชฝ+ํ )
- ๋ณดํต ์ค๋ฅธ์ชฝ ๋ฒํผ ์ฌ์ฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค.
๋ง์ฐ์ค ์ปค์ ์ขํ
1. x, y
- event.x / event.y
- ๋ฌธ์ ์ข์ธก ์๋จ์ ๊ธฐ์ค์ผ๋ก ํ๋ค.
- MS์์ ๋ง๋ ๋นํ์ค์ผ๋ก ๋น๊ถ์ฅํ๋ค.
2. clientX, clientY (***)
- event.clientX / event.clientY
- ๋ฌธ์ ์ข์ธก ์๋จ์ ๊ธฐ์ค์ผ๋ก ํ๋ค.
- x,y ๋ฐฉ๋ฒ๋ณด๋ค ์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋๋ก ํ๋ค.
- ์ ๋์ขํ
3. screenX, screenY
- event.screenX / event.screenY
- ๋ชจ๋ํฐ ์ข์ธก ์๋จ์ ๊ธฐ์ค์ผ๋ก ํ๋ค.
- ์นํ์ด์ง์ ์์ญ ๋ฐ์ ์ํฅ์ผ๋ก ๋ค๋ฃจ๊ธฐ๊ฐ ์ด๋ ต๋ค.
4. offsetX, offsetY (***)
- event.offsetX / event.offsetY
- ์ด๋ฒคํธ ๊ฐ์ฒด์ ์ข์ธก ์๋จ์ ๊ธฐ์ค์ผ๋ก ํ๋ค.
- ์๋์ขํ
offsetX, offsetY ์ฌ์ฉ ์์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
display: block;
width: 500px;
height: 300px;
outline: none;
resize: none;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>๋ง์ฐ์ค ๊ด๋ จ ์ด๋ฒคํธ</h1>
<form name="form1">
<textarea name="txt1"></textarea>
<input type="button" value="๋ฒํผ" name="btn1">
</form>
<script>
var txt1 = window.document.form1.txt1;
function message(txt){
var now = new Date();
txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
}
txt1.onmousedown = m3;
txt1.onmouseup = m4;
function m3() {
if(event.buttons==2) {
alert('์ค๋ฅธ์ชฝ ๋ฒํผ ํด๋ฆญ ๊ธ์ง!');
}
message('mounsedown');
}
function m4() {
message(event.offsetX + ',' + event.offsetY);
}
</script>
</body>
</html>
textarea์์ ํด๋ฆญํ๋ฉด ์ด๋ฒคํธ ๊ฐ์ฒด์ธ textarea์์ ๋ง์ฐ์ค ์ขํ๋ฅผ ๋ฐํํ๋ค.
onclick ์ ๋ง์ฐ์ค ์ด๋ฒคํธ๊ฐ ์๋๊ธฐ์ ์ขํ์ ๊ด๋ จ๋ ์์ ์ ์ง์ํ๋ค. (ํค๋ณด๋๋ก click๋ฅผ ์กฐ์ํ ์ ์๋ค.)
๐ปํค ๊ด๋ จ ์ด๋ฒคํธ๐ป
- onkeyXXX ์ผ๋ก ์ ๊ณตํ๋ค.
1. onkeydown
- ํค๋ฅผ ๋๋ ์ ๋ ๋ฐ์ํ๋ค.
- ์ ๋ ฅ๋ (๋ฌผ๋ฆฌ)ํค๋ ๊ตฌ๋ถ ๊ฐ๋ฅํ์ง๋ง, ๋ฌธ์๋ ๊ตฌ๋ถ์ด ๋ถ๊ฐ๋ฅํ๋ค.
- ๋ชจ๋ ํค์ ๋ฐ์ํ๋ค.(ctrl, alt ๋ฑ๋ฑ)
- ๋ฌผ๋ฆฌํค๋ฅผ ๊ตฌ๋ถํ๋ ์ฉ๋๋ก ์ฌ์ฉํ๋ค.
- ์ง์ ์ ๋๋ฅธ ๋ฌธ์๊ฐ์ ๋ฐ์ํ ์ ์๋ค.
2. onkeyup
- ํค๋ฅผ ๋์ ๋ผ ๋ฐ์ํ๋ค.
- ์ง์ ์ ๋๋ฅธ ๋ฌธ์๊ฐ ํ์ํ ์ ๋ฌด์ ํ์ฉํ๋ค.
3. onkeypress
- ํค๋ฅผ ๋๋ ์ ๋ ๋ฐ์ํ๋ค.
- ์ ๋ ฅ๋ ๋ฌธ์ ๊ตฌ๋ถ ๊ฐ๋ฅํ๋ค.
- ๋ฌธ์ํค์๋ง ๋ฐ์ํ๋ค.(***)
- ํ๊ธ์ ์ธ์ํ์ง ์๋๋ค.
*๋ฐฉํฅํค ์ฝ๋
37(์ข), 38(์), 39(์ฐ), 40(ํ)
onkeydown / onkeyup / onkeypress ์ฌ์ฉ ์์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input, textarea {
display: block;
margin-bottom: 10px;
outline: none;
/* width: 300px; */
}
input {padding: 5px;}
textarea {height: 200px;}
</style>
</head>
<body>
<h1>ํค ์ด๋ฒคํธ</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="text" name="txt2">
<textarea name="txt3"></textarea>
</form>
<script>
var txt1 = window.document.form1.txt1;
var txt2 = window.document.form1.txt2;
var txt3 = window.document.form1.txt3;
txt1.onkeydown = m1;
txt1.onkeyup = m2;
txt1.onkeypress = m3;
function m1() {
console.log('keydown');
}
function m2() {
console.log('keyup');
}
function m3() {
console.log('keypress');
}
</script>
</body>
</html>
์ซ์ 123๊ณผ ์์ด abc๋ onkeydown, onkeyup, onkeypress ๋ชจ๋ ๋ฐ์ํ์ง๋ง
ํ๊ธ ใฑใดใท๋ onkeydown, onkeyup๋ง ๋ฐ์ํ๋ค.
์ฃผ์โ
๊ธ์๊ฐ ํ ์คํธ๋ฐ์ค์ ์ ๋ ฅ๋๋ ์์ ์ ์๊ณ ์์ด์ผ ํ๋ค.
1. ์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฐ์ค์ ํค๋ณด๋์ ๊ธ์๋ฅผ ๋๋ฅธ๋ค.
2. keydown ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค.
3. ํ ์คํธ๋ฐ์ค์ ๊ธ์๊ฐ ์ ๋ ฅ๋๋ค.
4. keyup ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input, textarea {
display: block;
margin-bottom: 10px;
outline: none;
width: 300px;
}
input {padding: 5px;}
textarea {height: 200px;}
</style>
</head>
<body>
<h1>ํค ์ด๋ฒคํธ</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="text" name="txt2">
</form>
<script>
var txt1 = window.document.form1.txt1;
var txt2 = window.document.form1.txt2;
txt1.onkeydown = m1;
txt1.onkeyup = m2;
function m1() {
// txt1 ๊ฐ์ด ํ ๋ฐ์ ๋ฆ๊ฒ txt2์ ๊ฐ์ผ๋ก ๋์
๋จ
// txt2.value = txt1.value;
}
function m2() {
// txt1 ๊ฐ์ด ๋ฐ๋ก txt2์ ๊ฐ์ผ๋ก ๋์
๋จ
txt2.value = txt1.value;
}
</script>
</body>
</html>
๋ฐ๋ผ์, onkeydown๋ txt1๊ฐ์ด ํ ๋ฐ์ ๋ฆ๊ฒ txt2์ ๊ฐ์ผ๋ก ์ ๋ ฅ๋๊ณ
onkeyup์ txt1์ ๊ฐ์ด txt2์ ๊ฐ์ผ๋ก ๋ฐ๋ก ์ ๋ ฅ๋๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Javascript] BOM - window (0) | 2023.10.05 |
|---|---|
| [JavaScript] HTML ์์ฑ ์กฐ์ํ๊ธฐ (0) | 2023.10.05 |
| [JavaScript] BOM(Browser Object Mode) (0) | 2023.10.05 |
| [JavaScript] ๋ฐฐ์ด, Array (์ ์ธ, ๋์ , ๊บผ๋ด๊ธฐ) (0) | 2023.10.05 |
| [JavaScript] Date ๊ฐ์ฒด (0) | 2023.10.05 |
