이벤트란?
JS가 사용자와 상호작용하는데 사용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=!, initial-scale=1.0">
<title>이벤트에 대해서</title>
</head>
<body>
<input type ='button' value='hi'/>
</body>
</html>input에 button타입으로 주면 아래와 같은 결과가 나온다.
만약 여기에서 글씨를 쓰고 싶으면 value속성을 쓰면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=!, initial-scale=1.0">
<title>이벤트에 대해서</title>
</head>
<body>
<input type ='button' value='hi'/>
</body>
</html>
이번에는 버튼을 눌렀을때 hi라는 경고창이 뜨게 만들어 보자
경고창을 뜨게 하기 위해서 alert함수를 사용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=!, initial-scale=1.0">
<title>이벤트에 대해서</title>
</head>
<body>
<input type ='button' value='hi' onclick = 'alert("hi")'/>
</body>
</html>
onclick속성 값으로는 반드시 JS가 와야한다.
웹 브라우저 위에서 일어나는 일들을 사건이라고 하고 영어로는 "event"라고 한다.
어떤 event가 일어났을때 어떤 JS가 실행되도록 하는 것이 onclick이라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=!, initial-scale=1.0">
<title>이벤트에 대해서</title>
</head>
<body>
<input type ='button' value='hi' onclick = 'alert("hi")'/>
<input type = 'text' onchange="alert('changed')">
</body>
</html>input 타입으로 text로 준다면 아래처럼 글을 입력할 수 있는 input칸이 나온다.
값이 변경될 때마다 changed라는 경고창이 뜨게 한다.
onkeydown이벤트 사용하기
키보드로 하나 입력할 때마다 경고창이 뜬다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=!, initial-scale=1.0">
<title>이벤트에 대해서</title>
</head>
<body>
<input type ='button' value='hi' onclick = 'alert("hi")'/>
<input type = 'text' onchange="alert('changed')"/>
<input type = 'text' onkeydown="alert('key down!')"/>;
</body>
</html>
key point
1) onclick
2) onchange
3) onkeydown
4) event는 사용자와 상호작용할 수 있는 코드를 만들어 준다.
영차영차