01. 시간을 기반으로 콜백함수를 호출
setTimeout( function, time )
- time 시간이 지난 경우 function 함수를 콜백하는 함수
- time 은 millisecond (1/1000초) 단위
- timerId를 반환함
clearTimeout( timerId )
- setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소
- 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음
setInterval( function, time )
- time 시간이 경과할 때마다 function 함수를 콜백하는 함수
- timerId를 반환함
clearInterval( intervalId )
- setInterval 함수 호출의 결과로 반환된 intervalId를 인자로 받아 주기적으로 호출되던 function 호출을 취소
function callback(){ console.log("function callback!"); }
setTimeout(callback, 3000);
setInterval(callback, 5000);
clearInterval(2);
02. HTML Tag 속성에 EventHandler 추가하기
브라우저에서 발생하는 Event 종류
- form event : HTML 문서의 form element에 변화가 생기거나 submit버튼을 누르는 경우 등의 상황에서 발생
- window event : 패이지가 모두 로드되었을 때 발생하는 onload event 등이 있음
- mouse event : 사용자가 마우스를 조작했을 때 발생
- key event : 사용자가 키보드를 조작했을 때 발생
Event
- click : mouse event로 HTML element를 마우스로 클릭한 경우 발생
- change : form event로 form 엘리먼트의 내용이 변경된 경우 발생
- keydown : key event로 key가 눌린 경우 발생
HTML Tag의 속성으로 Event Handler 추가
- Tag 의 속성에 event handler 코드를 추가
- onEvent 속성 사용 ( onclick, onchange, onkeydown, ... )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 onclick="console.log('clicked');">html tag 속성에 event handler 추가하기</h1>
<input type="text" onchange="console.log('changed');" onkeydown="console.log('typed');">
</body>
</html>
03. JavaScript에서 EventHandler 설정
EventHandler 설정
property에 직접 Handler설정
- Element의 "on"+"이벤트" 의 속성에 메소드를 직접 지정
document.getElementById("form1").onsubmit = function eventHandler(){ console.log("from property"); return false; // 브라우저의 submit 처리 비활성 }
addEventListner 메소드
- element의 addEventListener(이벤트, 함수) 메소드를 호출해, eventHandler 등록
- 여러개의 이벤트 핸들러를 등록할 수 있음
document.getElementById("form1").addEventListener( "submit", function eventHandler(){ console.log("from addEventListener"); return false; } );
removeEventListener 메소드
- element의 removeEventListener(이벤트, 함수) 메소드를 호출해, eventHandler 삭제
Event 종류
- submit : form 태그의 submit 이벤트
- EventHandler에서 return false 시 브라우저 자체 기능 (페이지 이동) 비활성
- keydown : 키를 누른 경우 발생하는 이벤트
- EventHandler에서 return false 시 키 입력 비활성
- 실제로는 keydown event -> keypress event -> keyup event 순으로 이벤트가 발생하며 keypress event 발생시에 키가 입력됨. keydown event 에서 return false를 한 경우 keypress event가 이어서 발생하지 않음.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="GET" action="index.html" id="form1"
onsubmit="console.log('from tag'); return false;">
이름: <input type="text" name="id"><br>
메시지: <input type="text" name="msg"><br>
<input type="submit">
</form>
<script>
var t = document.getElementById("form1");
t.onsubmit = function a(){
console.log("from property");
return false;
}
function b(){
console.log("from addEventListener");
return false;
}
t.addEventListener("submit", b);
t.removeEventListener("submit",b);
</script>
</body>
</html>
아래 강의를 수강하며 개인적으로 공부하며 정리한 글입니다.
https://programmers.co.kr/learn/courses/10#curriculum
자바스크립트와 웹 프론트엔드 | 프로그래머스
## 자바스크립트와 웹 프론트엔드 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문 * [Hello, JavaScript!](https://programmers.co.kr/learn/courses/3)에서 배운 자바스크립트를 활용해서 웹 프론트엔드 기능을 다뤄보는 강의! 도서와 함께 들으면 참 좋은 강의 이 강의는 길벗출판사의 'Try! Helloworld 자바스크립트' 도서와 연계하여 제작되었습니다. 여기를 눌러 책 정보를
programmers.co.kr
'Programming > JavaScript' 카테고리의 다른 글
| AJAX란 (0) | 2019.12.21 |
|---|---|
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트4. Networking (0) | 2019.12.18 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트2. DOM (0) | 2019.12.18 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트1. Javascript와 web (0) | 2019.12.17 |
| [JavaScript] Hello, JavaScript: 자바스크립트 입문 파트6. 배열 (0) | 2019.12.15 |
댓글