Event : HTML의 요소에 어떤 일이 발생하는 것이 'HTML이벤트'이다.
Event의 속성
- onload : 브라우저가 HTML페이지의 로딩을 마쳤을 때
- onclick : 사용자가 HTML요소를 클릭했을 때
- onmouseover : 마우스가 HTML 요소의 위에 올라갔을 때
- onmouseout : 마우스가 HTML 요소의 위에서 밖으로 벗어났을 때
- onkeydown : 사용자가 키보드를 눌렀을 때
- onchange : HTML요소가 변경되었을 때
Event모델 : 이벤트가 발생시, 수행될 작업을 작성하는 것을 이벤트처리 라고한다.
문서객체(document object)에 이벤트 처리를 연결하는 방법(이번트 모델)
DOM Level 0
- 기본 이벤트 모델(고전 이벤트 모델)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id = "header">Click me!!!</h1>
<script>
window.onload = function(){
var header = document.getElementById('header');
header.onclick = function() {alert("Hello");}
}
function click() {alert("Hello");}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
<a>처럼 일부태그는 기본적인 이벤트(디폴트 이벤트)를 가지고잇다. 디폴트 이벤트를 제거하기 위해서는 이벤트 처리함수가 fasle를 반환하면 된다.
|
1
|
|
<form>는 submit버튼을 누르면 onsubmint이벤트가 발생하고 <form>에 입력된 내용이 전송된다. 입력된 내용을 확인한 후 전송하려면
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<form onsubmin = "return validCheck()">
id:<input type = "return valickCehck()">
<input type = "submint" value = "확인">
</form>
<script>
function validCheck() {//입력된 userId를 읽어와 길이를 체크
var userId = document.getElementByid('userId').value;
//userId의 길이가 8자를 넘으면 경고를 보여주고 false를 반환
if(userId.length >= 8 ){
alert("idㅇㅢ 길이는 8자를 넘을수 없습니다.");
return false;
}
return true;
}
</script>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
- 인라인 이벤트 모델
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id = "header" onclick="alert (this);">Click me!!!</h1>
<script>
window.onload = function() {
var header = document.getElementById('header');
}
function click() { alert("Hello");}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
이벤트 전달 : 특정요소에서 이벤트가 발생했을 때, 부모나 자손 요소에 전달될 수 있다.
부모 요소로 전달되는 것을 이벤트 버블링이라 한다.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
border : 3px solid black;
padding :10 px 20px ;
}
</style>
</head>
<body onclick="alert('1-body'">1-body
<form onclick="alert('2-form')">2-form
<div onclick="alert('3-div')">3-div<br>
<button id = 'btn' onclick="alert('4-button')">4-button</button>
</div></form>
<script>
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
이벤트 중단 : event 객체의 cancelBubble속성을 true로 변경하면 된다.
DOM Level 2 : DOM Level 1의 단점(이벤트 처리기 한개만 등록가능)을 보완하여 여러개의 이벤트 처리기를 등록/제거 가능하다.
- 표준 이벤트 모델
- IE 이벤트 모델
'IT > JavaScript' 카테고리의 다른 글
| 체크박스, 리스트 이동버튼 (0) | 2019.06.13 |
|---|---|
| 다차원 배열 (0) | 2019.06.13 |
| DOM(Document Object Model) (0) | 2019.06.12 |
| 함수 (0) | 2019.06.11 |
| 반복문 (0) | 2019.06.11 |
댓글