Callback Function / EventHandler

✨ Callback Function

• callback function은 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수를 의미합니다.
• 그래서 말그대로 나중에 호출해준다는 의미로 callback 함수라는 이름을 붙여서 사용합니다.

🕐 시간을 기반으로 콜백함수를 호출하는 명령

• setTimeout( function, time ) : time 시간이 지난 경우 function 함수를 콜백하는 함수, time 은 millisecond (1/1000초) 단위, timerId를 반환합니다.
• setInterval( function, time ) : time 시간이 경과할 때마다 function 함수를 콜백하는 함수, timerId를 반환합니다.

위의 두 명령을 실행했을 때 반환되는 정수값은 Timeout, Interval에 대한 id로 clearTimeout, clearInterval을 통해 명령을 취소할 수 있습니다.

• clearTimeout( timerId ) : setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소, 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없습니다.
• clearInterval( intervalId ) : setInterval 함수 호출의 결과로 반환된 intervalId를 인자로 받아 주기적으로 호출되던 function 호출을 취소합니다.

🔨 브라우저에서 발생하는 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가 눌린 경우 발생

👀 EventHandler 설정방법

1. HTML Tag의 속성으로 Event Handler 추가 -> onEvent 속성 사용 ( onclick, onchange, onkeydown, ... )

   <h1 onclick="console.log('clicked');">..</h1> 
     <input type="text" onchange="console.log('changed');" onkeydown="console.log('typed');"> 
     //입력창에 텍스틀를 입력하거나 지울때마다 typed가 출력되고 입력창에서 빠져나올 때 changed 출력

2. js에서 property에 직접 Handler 설정 -> Element의 "on"+"이벤트" 의 속성에 메소드 직접 지정

   document.getElementById("form1").onsubmit = function eventHandler(){ console.log("from property"); return false; }

• return false는 브라우저의 submit 처리 비활성을 위해서 입니다. 만약 onkeydown="return false;"가 추가되면 입력창에 아무것도 입력되지 않습니다.

3. addEventListner 메소드 -> element의 addEventListener(이벤트, 함수) 메소드를 호출해 eventHandler 등록합니다.

• 여러개의 이벤트 핸들러를 등록할 수 있습니다.

  document.getElementById("form1").addEventListener(
        "submit", 
        function eventHandler(){
            console.log("from addEventListener");
            return false;
        }
      );

• removeEventListener : element의 removeEventListener(이벤트, 함수) 메소드를 호출해 eventHandler 삭제합니다.

출처 - https://school.programmers.co.kr/learn/courses/10