이벤트는 웹 브라우저가 사용자와 상호작용을 할 수 있도록 해주는 기능이다, 대표적인 이벤트의 종류로는 아래의 7가지가 있다.
1. 마우스 이벤트
2. 키보드 이벤트
3. HTML 프레임 이벤트
4. HTML 입력 양식 이벤트
5. 유저 인터페이스(UI) 이벤트
6. 구조 변화 이벤트
7. 터치 이벤트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let header=document.getElementById('header');
function whenClick(){
alert('CLICKED');
}
header.onclick=whenClick;
}
</script>
</head>
<body>
<h1 id="header">Click</h1>
</body>
</html>
|
cs |
이벤트에 대한 용어는 '이벤트 이름(또는 이벤트 타입, Event Type)', '이벤트 속성(Event Attribute)' 그리고 '이벤트 리스너(Event Listener, 또는 이벤트 핸들러, Event Handler)'가 있다. 위의 코드에서 용어들을 정리해보면 아래와 같다.
| 이벤트 용어 | 내용 |
| 이벤트 이름(이벤트 타입 Event Type) | load, click |
| 이벤트 속성(Event Attribute) | onload, onclick |
| 이벤트 리스너(Even Listener, 이벤트 핸들러 Event Handler) | whenClick() 같은 이벤트 속성에 할당이 된 function(){} |
이외에도 이벤트 모델(Event Model)이라는 용어도 존재하는데, 이것은 DOM Level 0과 DOM Level 2로 나뉘어지고 각각의 Level에서도 두 가지로 나뉘어져 총 네 가지 방법으로 이벤트를 연결할 수 있다.
| 이벤트 모델(Event Model) | |||
| DOM Level 0 | DOM Level 2 | ||
| 인라인 이벤트 모델 | 기본 이벤트 모델 | IE 이벤트 모델 | 표준 이벤트 모델 |
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - 고전 이벤트 모델(기본 이벤트 모델) (0) | 2019.12.19 |
|---|---|
| JavaScript - 이벤트 종류 (0) | 2019.12.19 |
| JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 (0) | 2019.12.17 |
| JavaScript - 문서 객체 선택 (0) | 2019.12.17 |
| JavaScript - 문서 객체 생성 (0) | 2019.12.16 |
