#이벤트
화면에서 클릭이나, 동작시 발생하는 동적인 기능이다 태그와 스크립트의 이벤트를 연결 하는 방식에는
1.인라인 이벤트 모델
2.기본 이벤트 모델
3.표준 이벤트 모델
이 있으며, 이벤트 앞에 on을 붙인다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<head></head>
<body>
<button onclick ="check1()"> 인라인 이벤트 </button>
<button onclick ="check2(this)">버튼 1</button>
<button onclick ="check2(this)">버튼 2</button>
<button onclick ="check2(this)">버튼 3</button>
<script>
function check1(){
alert('경고창')
}
function check2(a){
console.log(a);
}
</script>
</body>
</html>
#기본 이벤트 방식
기본 이벤트 방식은 HTML 태그를 얻어와서 익명함수 기법으로 이벤트를 등록한다
HTML태그를 얻어올 때는 순서상 HTML 태그가 취득할 명령어 이후에 오면 반드시 load 이벤트를 적용해야함
load 이벤트는 페이지당 한 번만 사용 가능하다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<head></head>
<body>
<script>
//onload 이벤트는 페이지가 로딩된 이후에 실행되는 이벤트.
//페이지당 한번만 사용할 수 있다.
window.onload = function() {
var btn = document.getElementById("btn")
btn.onclick = function(){
console.log("기본이벤트 실행")
}
}
console.log(btn);
</script>
<button type="button" id ="btn">기본이벤트</button>
</body>
</html>