<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 이벤트</title>
<style>
.warn { color: red }
</style>
</head>
<body>
<h1>자바스크립트 이벤트</h1>
<h2>개요</h2>
<p>이벤트는 사용자가 웹페이지를 이용하면서
발생시키는 어떤 행위를 의미</p>
<p>버튼을 클릭하거나 브라우저 크기를 변경하거나
html 문서가 브라우져에 의해 로드되었거나
특정 키를 눌렀거나 하는 것을 의미</p>
<p>이벤트가 발생하면 누군가는 이를 감지할 수 있어야 하고
그에 대응하는 처리를 호출해 주어야 함</p>
<p>브라우저는 이러한 이벤트를 감지해서 통지를 해줌으로써
사용자와의 상호작용을 가능하게 함</p>
<h2>이벤트 핸들러</h2>
<p>이벤트가 발생하면 그에 맞은 반응을 해야 함</p>
<p>이러한 반응은 보통 함수로 구현되어 있고,
이벤트 발생시 함수가 실행됨 - 이벤트 핸들러</p>
<h2>이벤트 핸들러 등록</h2>
<p>인라인 이벤트 핸들러 :
요소에 직접 이벤트핸들러를 등록 (비추),
<요소 'on이벤트명'='이벤트핸들러'></p>
<p>인라인 이벤트 핸들러 프로퍼티 :
DOM 객체에 속성형태로 이벤트핸들러 등록,
객체명.이벤트명 = 이벤트핸들러 </p>
<p>addEventListener :
addEventListener함수를 이용해서
DOM 요소에 이벤트를 연결(binding)하고
해당 이벤트발생시 호출될 콜백함수 지정 (추천!),<br>
하나의 요소에 여러 이벤트 등록 가능.
버블링과 캡처링 지원,
대상.addEventListener(이벤트명, 콜백함수명)</p>
<div>
<button type="button"
onclick='sayHello()'>눌러보세요</button>
<button type="button" id="btn2">눌러보세요</button>
<button type="button" id="btn3">눌러보세요</button>
</div>
<script>
let sayHello = () => alert('Hello, World!!');
let btn2 = document.getElementById('btn2');
btn2.onclick = sayHello; // 핸들러 등록시 괄호는 제외
let btn3 = document.getElementById('btn3');
btn3.addEventListener('click', sayHello);
</script>
<hr>
<div>나이 <input type="text" name="age"></div>
<div>아이디 <input type="text" name="userid"></div>
<div>전화번호 <input type="text" name="phone"></div>
<p id="msg2"></p>
<script>
// 나이의 유효성을 검사하는 함수 checkAge
let checkAge = (age) => {
let result = '나이가 올바른 형식이 아닙니다!';
let msg = document.getElementById('msg2');
let re = /^[0-9]{1,3}$/;
if (re.test(age))
result = '올바른 나이 형식입니다!';
msg.textContent = result;
};
// 아이디 유효성을 검사하는 함수 checkUserid
let checkUserid = (userid) => {
let result = '아이디가 올바른 형식이 아닙니다!';
let msg = document.getElementById('msg2');
let re = /^[a-z].{5,17}$/;
if (re.test(userid))
result = '올바른 아이디 형식입니다!';
msg.textContent = result;
};
// 전화번호 유효성을 검사하는 함수 checkPhone
let checkPhone = (phone) => {
let result = '전화번호가 올바른 형식이 아닙니다!';
let msg = document.getElementById('msg2');
let re = /^01[016789]-?\d{3,4}-?\d{4}$/;
if (re.test(phone))
result = '올바른 전화번호 형식입니다!';
msg.textContent = result;
};
let age = document.getElementsByName('age')[0];
let userid = document.getElementsByName('userid')[0];
let phone = document.getElementsByName('phone')[0];
// 이벤트핸들러에 인자를 전달하는 경우 다음과 같이 작성
age.addEventListener('blur', () => {
checkAge(age.value);
});
userid.addEventListener('blur', () => {
checkUserid(userid.value);
});
phone.addEventListener('blur', () => {
checkPhone(phone.value);
});
</script>
<h2>동기 vs 비동기 처리 모델</h2>
<img src="img/async.png" style="width: 750px">
<p>처리해야 할 작업 순서를 누가 정하는가와
어떤 흐름으로 처리할 것인가에 따라 분류</p>
<p>동기synchronous 처리 :
작업들을 정해진 순서대로 실행.
만약, 어떤 작업이 여전히 실행중이면
끝날때까지 다음 작업들은 대기해야만 함.
개발자가 실행순서를 정함.
<b>작업 완료 확인</b>은 필수</p>
<p>비동기asynchronous 처리 : 작업들을 병렬로 실행.
만약, 어떤 작업이 여전히 실행중이라도
대기 하지 않고 다음 작업을 실행함.
시스템이 실행순서를 정함.
<b>작업 완료 확인</b>은 신경쓰지 않음</p>
<h2>블로킹 vs non-블로킹</h2>
<img src="img/blocking.png" style="width: 750px">
<p>작업 처리에 대한 제어권을
어떻게 다루는지에 따라 분류</p>
<p>블로킹blocking : 제어권이 호출된 함수로 넘어감</p>
<p>non-블로킹blocking : 함수가 호출되어도 제어권은
넘어가지 않음
(실제로 제어권이 넘어갔다가 바로 돌려받음)</p>
<h2>이벤트 종류</h2>
<p>load : 웹페이지가 브라우저에 의해 읽혀졌을때</p>
<p>resize : 브라우저의 창의 크기를 조절했을때</p>
<p>scroll : 브라우저의 페이지를 스크롤했을때</p>
<p>keydown : 키를 누르고 있을때(텍스트 입력x, 순수하게 키 입력만 감지)</p>
<p>keyup : 누르고 있던 키를 뗄때(텍스트 입력중)</p>
<p>keypress : 키를 누르고 뗏을때(주로 입력가능한 텍스트 키 중점)</p>
<p>click : 마우스버튼을 클릭했을때</p>
<p>dblclick : 마우스버튼을 더블클릭했을때</p>
<p>mouseover : 마우스 포인터를 특정요소 위에 두었을때</p>
<p>mouseout : 마우스 포인터를 특정요소 밖으로 두었을때</p>
<p>focus : 요소가 포커스를 얻을때</p>
<p>blur : 요소가 포커스를 잃을때</p>
<p>change : select, checkbox, radio button의
상태가 바뀌었을때</p>
<p>submit : submit 버튼을 클릭했을때</p>
<hr>
<!-- 자기소개란에 입력된 글자수 초과 여부 체크 -->
<div>
<textarea id="intro" rows="5"
cols="50" ></textarea>
<div><span id="chrcnt"></span>/100</div>
</div>
<script>
let intro = document.getElementById('intro');
let chrcnt = document.getElementById('chrcnt');
//intro.addEventListener('keydown', () => {
// chrcnt.textContent = intro.value.length + 1;
//});
// intro.addEventListener('keypress', () => {
// chrcnt.textContent = intro.value.length + 1;
// });
intro.addEventListener('keyup', () => {
chrcnt.textContent = intro.value.length;
});
</script>
<hr>
<!-- input폼에 값 입력 여부 체크 -->
<div>
<div>아이디<input type="text" name="userid"></div>
<div id="warn" class="warn"></div>
<button type="button" id="join" >입력 완료</button>
</div>
<script>
let checkform =() => {
let mass = '필수 정보입니다';
let userid = document.getElementsByName('userid')[0];
let warn = document.getElementById('warn');
if (userid.value =='')
warn.textContent = mass ;
else warn.textContent = '';
};
let join = document.getElementById('join');
join.addEventListener('click', checkform);
</script>
<div>
<div>아이디(uid)<input type="text" name="uid" placeholder="아이디를 입력"></div>
<div id="warn1" class="warn"></div>
<div>비밀번호(pwd)
<input type="password" name="pwd"></div>
<div id="warn2" class="warn"></div>
<div>이름(name)
<input type="text" name="name"></div>
<div id="warn3" class="warn"></div>
<div>성별(gender)
남<input type="radio" name="gender" value="m">
여<input type="radio" name="gender" value="f">
</div>
<div id="warn4" class="warn"></div>
<button type="button" id="joinbtn">입력완료</button>
</div>
<script>
let checkfrm = () => {
let msg = '필수 정보입니다';
const uid = document.getElementsByName('uid')[0];
const pwd = document.getElementsByName('pwd')[0];
const name = document.getElementsByName('name')[0];
const gdrs = document.getElementsByName('gender');
const warn1 = document.getElementById('warn1');
const warn2 = document.getElementById('warn2');
const warn3 = document.getElementById('warn3');
const warn4 = document.getElementById('warn4');
if (uid.value == '') warn1.textContent = msg;
else warn1.textContent = '';
if (pwd.value == '') warn2.textContent = msg;
else warn2.textContent = '';
if (name.value == '') warn3.textContent = msg;
else warn3.textContent = '';
// 라디오버튼의 유효성 검사는 checked 여부로 수행
if (!gdrs[0].checked && !gdrs[1].checked)
warn4.textContent = msg;
else warn4.textContent = '';
};
const joinbtn = document.getElementById('joinbtn');
joinbtn.addEventListener('click', checkfrm);
</script>
</body>
</html>