고전 이벤트 모델(기본 이벤트 모델)은 문서 객체 이벤트 속성이고 이벤트를 연결하는 방법이다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let header=document.getElementById('header');
header.onclick=function(){
alert('클릭');
header.onclick=null;
}
}
</script>
</head>
<body>
<h1 id="header">Click</h1>
<h1 id="documentHeader">클릭</h1>
<script>
documentHeader.onclick=function(){
alert('Click');
documentHeader.onclick=null;
}
</script>
</body>
</html>
|
cs |
위의 코드를 실행하면 2개의 h1태그에 각각 Click과 클릭이 보이는데 각각 클릭을 하면 alert가 실행이 된다. 이벤트 리스너를 제거하려 한다면, 문서 객체의 이벤트 속성에 null 값을 넣어주면 된다. 이렇게 되면 첫 번째 클릭에 이벤트가 실행이 되고 두번째 클릭부터는 이벤트가 실행이 되지 않는다.
고전 이벤트 모델(기본 이벤트 모델)은 이벤트 하나에 이벤트 리스너 하나만 연결할 수 있다.
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - 인라인 이벤트 모델, 디폴트 이벤트 제거, 이벤트 전달 (0) | 2019.12.20 |
|---|---|
| JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행 (0) | 2019.12.19 |
| JavaScript - 이벤트 종류 (0) | 2019.12.19 |
| JavaScript - 이벤트 개요 (0) | 2019.12.18 |
| JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 (0) | 2019.12.17 |
