프로그래밍 공부/JavaScript
JavaScript - 고전 이벤트 모델(기본 이벤트 모델)
신입사원 최종원
2019. 12. 19. 10:43
고전 이벤트 모델(기본 이벤트 모델)은 문서 객체 이벤트 속성이고 이벤트를 연결하는 방법이다.
|
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 값을 넣어주면 된다. 이렇게 되면 첫 번째 클릭에 이벤트가 실행이 되고 두번째 클릭부터는 이벤트가 실행이 되지 않는다.
고전 이벤트 모델(기본 이벤트 모델)은 이벤트 하나에 이벤트 리스너 하나만 연결할 수 있다.