<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- input / select / a 링크에 event 적용하기 -->
<h3>Event 처리 및 콜백함수 익숙해 지기</h3>
<input type="text" id="ipt" />
<hr>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<a href="http://www.google.co.kr" onclick="alert('언제실행?')">구글로 이동</a>
<script>
//step02 - 선택한 option의 값을 출력
document.getElementById('cars').addEventListener('change', function(){
//cars의 id값을 보유한 select tag 내부에 종속적인 option tag의 value
alert(document.getElementById('cars').value);
});
//step01
//입력된 데이터가 master 라면 안녕하세요 인사
//master가 아니라면 넌 누구니? 메세지 출력
document.getElementById("ipt").addEventListener('blur', function(){
alert('input tag에서 focus 이동');
let data = document.getElementById('ipt').value;
if(data == 'master') {
alert('안녕하세요');
}else {
alert('넌 누구니?');
}
});
</script>
</body>
</html>
