콜백, 이벤트

callback 함수 : 조건을 등록해두고 그 조건을 만족한 경우 나중에 호출해주는 함수

setTimeout : 한번만 실행하고 끝

setInterval : 반복해서 실행

167 : 타임아웃에 대한 아이디

180 : 인터벌에 대한 아이디

clearTimeOut, clearInterval를 통해 해당 함수를 멈추게 함

<실행 결과>

---

<이벤트>

- form Event : HTML 문서의 form element에 변화가 생기거나 submit 버튼을 누를 경우 발생

- window Event : 페이지가 모두 로드 되었을 때 onload event 발생

- mouse Event : 사용자가 마우스를 조작했을 때 발생하는 이벤트

- key Event : 사용자가 키보드를 조작했을 때 발생하는 이벤트

 

<h2 onclick="console.log('clicked');"></h2>

=> h2를 클릭하면 개발자모드에서 clicked 글자가 뜸

<input type="text" onchange="console.log('changed');" onkeydown="console.log('typed');">

=> text 박스에 글을 입력하면 개발자모드 콘솔에서 typed 글자가 뜸

=> text 박스에 글을 입력한 후 다른 곳으로 이동하면 개발자모드 콘솔에서 changed 글자가 뜸 ( 단, 글자를 수정하지 않으면 발생X)

---

1. form에 직접

<form id="form" onsubmit="console.log('from tag')";>

<input type="submit">

</form>

= > 서브밋 버튼을 누르면 form가 실행되고, 개발자모드 콘솔에는 from tag가 출력됨

2. 자바스크립트를 이용

<script>

var a = document.getElementById("form");

a.onsubmit = function b(){

console.log("form property");

}

return false;

</script>

3. addEventListener 함수 사용

<script>

var a = document.getElementById("form");

function b(){

console.log("form property");

}

return false;

a.addEventListener ("submit", b); ->호출하고 싶은 내용 ( 개발자모드 console에서 확인 !!! )

a.removeEventListener("submit", b); -> 삭제하고 싶은 내용 ( 개발자모드 console에서 확인 !!! )

</script>