재밌는 이벤트의 세계, JavaScript
<input type="button" 이벤트이름="function()" />
<!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>
<h1>10 + 50 = <span id="question">?</span> </h1>
<!--
token tag"><input type="button" value="결과확인" onclick="sum()">
<script>
// 1. 결과확인을 눌렀을 때 10 + 50 의 값을 span태그 안에 넣어라
function sum(){
let mytag = document.getElementById('question');
mytag.innerHTML = 60;
}
</script>
</body>
</html>
<!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 type="button" id="target" value="button"/>
<script>
let t = document.getElementById("target");
// eventObj : 이벤트 객체
t.onclick = function(eventObj){
alert("hello world, " + eventObj.target.value);
};
</script>
</body>
</html>
<!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 type="button" id="target1" value="button1"/>
<input type="button" id="target2" value="button2"/>
<script>
// id이름으로 HTML 요소를 가져온다.
let t1 = document.getElementById('target1');
let t2 = document.getElementById('target2');
// eventObj : 이벤트 객체
function btn_listener( eventObj ){
switch(eventObj.target.id){
case 'target1' :
alert("target1!!!");
break;
case 'target2' :
alert("target2!!!");
break;
}
}
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
</script>
</body>
</html>
<!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 type="button" id="target1" value="property">
<input type="button" id="target2" value="listener">
<script>
function onclick(){
alert("onClick1!!!");
}
function onclick2(){
alert("onClick2!!!");
}
// property 방식
// onclick2만 작동을한다
document.getElementById('target1').onclick = function(){
onclick();
}
document.getElementById('target1').onclick = function(){
onclick2();
}
// addEventListener 방식
// onclick, onclick2 모두 작동 한다.
document.getElementById('target2').addEventListener('click', onclick);
document.getElementById('target2').addEventListener('click', onclick2);
// 이벤트 제거
document.getElementById('target2').removeEventListener('click', onclick);
</script>
</body>
</html>
이벤트를 활용한 모습마다 이벤트 취소의 모습이 달라요.
return false;
<!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>
<p>
<label>prevent event on</label>
<input type="checkbox" id="prevent">
</p>
<p>
<a href="https://www.naver.com" id="target1">naver</a>
</p>
<p>
<form action="https://www.naver.com">
<input type="submit" id="target2">
</form>
</p>
<script>
// property 형식의 이벤트를 취소할 때는 return false; 를 입력해준다.
document.getElementById('target1').onclick = function(){
if(document.getElementById('prevent').checked){
// 이벤트 취소
return false;
}
};
document.getElementById('target2').onclick = function(){
if(document.getElementById('prevent').checked){
// 이벤트 취소
return false;
}
};
</script>
</body>
</html>
(1) prevent event on 체크 전
(2) prevent event on 체크 전 : 연결한 페이지로 넘어가요
(3) prevent event on 체크 후 : 연결한 페이지로 넘어가는 이벤트가 취소돼요.
event.preventDefault();
<!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>
<p>
<label>prevent event on</label>
<input type="checkbox" id="prevent">
</p>
<p>
<a href="https://www.naver.com" id="target1">naver</a>
</p>
<p>
<form action="https://www.naver.com">
<input type="submit" id="target2">
</form>
</p>
<script>
// addEventListener 형식의 이벤트를 취소할 때는 event.preventDefault(); 를 입력해준다.
document.getElementById('target1').addEventListener('click', function( event ){
if(document.getElementById('prevent').checked){
// 이벤트 취소
event.preventDefault();
}
});
document.getElementById('target2').addEventListener('click', function( event ){
if(document.getElementById('prevent').checked){
// 이벤트 취소
event.preventDefault();
}
});
</script>
</body>
</html>
(1) prevent event on 체크 전
(2) prevent event on 체크 전 : 연결한 페이지로 넘어가요
(3) prevent event on 체크 후 : 연결한 페이지로 넘어가는 이벤트가 취소돼요.
[문제] 아래의 출력결과와 같이 [input]에 어떠한 글을 적어 넣으면 [p]요소에 같은 글이 출력되도록 해라.
[기본 HTML]
<!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>
<p id="result"></p>
<input id="target" type="text"/>
<script>
// 문제 풀이
</script>
</body>
</html>
[문제 풀이]
<!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>
<p id="result"></p>
<input id="target" type="text"/>
<script>
let t = document.getElementById('target');
t.addEventListener('change', function(event){
document.getElementById('result').innerHTML = event.target.value;
});
</script>
</body>
</html>
[문제] 아래의 출력결과와 같이 [input]을 클릭하면 Console 창에 "2번 이벤트 발생!!!" 출력. [input]이 아닌 공간을 클릭하면 Console 창에 "1번 이벤트 발생!!!" 출력
[기본 HTML]
<!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 id="target" type="text">
<script>
// 문제 풀이
</script>
</body>
</html>
[문제] 아래의 출력결과와 같이 해당 항목들을 다 체크하지 않으면 경고창을 띄어 사용자가 모든 항목을 채울 수 있도록 해라.
[기본 HTML]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>form</title>
<style type="text/css">
/** 하나의 입력 영역을 정의하는 <div>태그 */
.input_group {
height: 42px;
border-bottom: 1px dotted #ccc;
font: 1em/40px '돋움', 'Helvetica';
}
/** 입력양식의 제목을 볼 수 있게 하는 태그 */
.input_group > label {
width: 80px; display: inline-block;
}
</style>
</head>
<body>
<form name="form1" onsubmit="doSubmit(); return false;">
<fieldset>
<legend>회원가입</legend>
<div class="input_group first">
<label>이름</label>
<input type="text" name="user_name" />
</div>
<div class="input_group">
<label>성별</label>
<label><input type="radio" name="gender" value="M"> 남자</label>
<label><input type="radio" name="gender" value="F"> 여자</label>
</div>
<div class="input_group">
<label>직업</label>
<select name="job">
<option>----- 선택하세요 -----</option>
<option value="dev">프로그래머</option>
<option value="pub">퍼블리셔</option>
</select>
</div>
<div class="input_group">
<label>취미</label>
<label><input type="checkbox" value="축구" name="hobby"> 축구</label>
<label><input type="checkbox" value="농구" name="hobby"> 농구</label>
<label><input type="checkbox" value="야구" name="hobby"> 야구</label>
</div>
<div class="input_group">
<label> </label>
<input type="submit" name="button" value="제출" />
<input type="reset" name="button2" value="리셋" />
</div>
</fieldset>
</form>
<script>
// 문제 풀이
</script>
</body>
</html>
[문제 풀이]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>form</title>
<style type="text/css">
/** 하나의 입력 영역을 정의하는 <div>태그 */
.input_group {
height: 42px;
border-bottom: 1px dotted #ccc;
font: 1em/40px '돋움', 'Helvetica';
}
/** 입력양식의 제목을 볼 수 있게 하는 태그 */
.input_group > label {
width: 80px; display: inline-block;
}
</style>
</head>
<body>
<form name="form1" onsubmit="doSubmit(); return false;">
<fieldset>
<legend>회원가입</legend>
<div class="input_group first">
<label>이름</label>
<input type="text" name="user_name" />
</div>
<div class="input_group">
<label>성별</label>
<label><input type="radio" name="gender" value="M"> 남자</label>
<label><input type="radio" name="gender" value="F"> 여자</label>
</div>
<div class="input_group">
<label>직업</label>
<select name="job">
<option>----- 선택하세요 -----</option>
<option value="dev">프로그래머</option>
<option value="pub">퍼블리셔</option>
</select>
</div>
<div class="input_group">
<label>취미</label>
<label><input type="checkbox" value="축구" name="hobby"> 축구</label>
<label><input type="checkbox" value="농구" name="hobby"> 농구</label>
<label><input type="checkbox" value="야구" name="hobby"> 야구</label>
</div>
<div class="input_group">
<label> </label>
<input type="submit" name="button" value="제출" />
<input type="reset" name="button2" value="리셋" />
</div>
</fieldset>
</form>
<script>
function doSubmit(){
// 폼 객체
let frm = document.form1;
// 이름 입력여부 검사
// 값이 없을 때 true 값을 return
if(!frm.user_name.value){
alert("이름을 입력하세요.");
frm.user_name.focus();
return false;
}
// 라디오버튼의 입력 여부 검사
if(!frm.gender[1].checked && !frm.gender[1].checked){
alert("성별을 선택하세요.");
return false;
}
// select 요소에 대한 검사
if(frm.job.selectedIndex < 1){
alert("직업을 선택해주세요.");
return false;
}
// 체크박스 선택 여부 검사
let chk = false;
for( let i = 0; i < frm.hobby.length; i++ ){
if(frm.hobby[i].checked){
chk = true;
break;
}
}
if(!chk){
alert("취미를 선택해 주세요.");
return false;
}
// 입력 확인하기
if(confirm("입력하신 내용이 맞습니까?")){
frm.submit();
}
}
</script>
</body>
</html>
[문제] 아래의 출력결과와 같이 각각의 이벤트가 발생할 때 info에 해당 이벤트가 실행되는 getMilliseconds()가 출력되게 해라.
[기본 HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
background-color: black;
color: white;
}
#target{
width: 200px;
height: 200px;
background-color: green;
margin: 10px;
}
table{
border-collapse: collapse;
margin: 10px;
float: left;
width: 200px;
}
td,th{
padding: 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="target"></div>
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td>
</tr>
<tr>
<td>dblclick</td>
<td id="elmdblclick"></td>
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td>
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td>
</tr>
</table>
<script>
// 문제 풀이
</script>
</body>
</html>
[문제 풀이]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
background-color: black;
color: white;
}
#target{
width: 200px;
height: 200px;
background-color: green;
margin: 10px;
}
table{
border-collapse: collapse;
margin: 10px;
float: left;
width: 200px;
}
td,th{
padding: 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="target"></div>
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td>
</tr>
<tr>
<td>dblclick</td>
<td id="elmdblclick"></td>
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td>
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td>
</tr>
</table>
<script>
let t = document.getElementById('target');
function handler( event ){
let time = new Date();
let timestr = time.getMilliseconds();
let info = document.getElementById('elm' + event.type);
info.innerHTML = timestr;
}
t.addEventListener('click', handler);
t.addEventListener('dblclick', handler);
t.addEventListener('mousedown', handler);
t.addEventListener('mouseup', handler);
t.addEventListener('mousemove', handler);
t.addEventListener('mouseover', handler);
t.addEventListener('mouseout', handler);
t.addEventListener('contextmenu', handler);
</script>
</body>
</html>
⚫️ 디버깅이 필요한 사이트에서 F12를 눌러 개발자도구를 켜주세요. [Sources] 에서 해당 사이트 html 파일에 들어가면 소스 코드들을 볼 수 있고, 원하는 코드 줄을 클릭하면 BreakPoints를 설정 할 수 있어요.
⚫️ 사이트에서 동작을하면 (제출 등) BreakPoints에서 멈추게 되고 이후에 동작을 실행하려면 재생 버튼을 눌러주면 돼요. 자바스크립트의 오류를 이 과정을 통해 잘 알아볼 수 있어요.
출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif