자바스크립트와 웹프론트엔드 - 3

본 내용은 https://programmers.co.kr/learn/courses/10

강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. 

 

 

Part3. Event + JS

1. Callback function

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

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

• setTimeout( function, time ) : time 시간이 지난 경우 function 함수를 콜백하는 함수 ( 1/1000초 단위 /  timerId를 반환 )

• clearTimeout( timerId ) :  timerId를 인자로 받아 function호출을 취소 ( 이미 호출시 해당 x )

• setInterval( function, time ) : time 시간이 경과할 때마다 function 함수를 콜백하는 함수 ( timerId를 반환 )

• clearInterval( intervalId ) : setInterval 함수 호출의 결과로 반환된 intervalId를 인자로 받아 function 호출을 취소

 

2. HTML Tag 속성에 EventHandler 추가하기

[ 브라우저에서 발생하는 Event 종류 ]

• form event : HTML 문서의 form element에 변화가 생기거나 submit버튼을 누르는 경우 등의 상황에서 발생 ( change )

• window event : 패이지가 모두 로드되었을 때 발생하는 onload event 등이 있음

• mouse event : 사용자가 마우스를 조작했을 때 발생  (  click  )

• key event : 사용자가 키보드를 조작했을 때 발생 ( keydown event -> keypress event -> keyup event 순 )

* keydown event 에서 return false를 한 경우 keypress event가 이어서 발생하지 않음.

 

3. JS에서 EventHandler 설정

[ EventHandler 설정 ]

• property에 직접 Handler설정 : Element의 "on"+"이벤트" 의 속성에 메소드를 직접 지정

document.getElementById("form1").onsubmit = function eventHandler(){

console.log("from property");   

return false; // 브라우저의 submit 처리 비활성  }

 

• addEventListner (이벤트, 함수):  여러개의 이벤트 핸들러를 등록할 수 있음

document.getElementById("form1").addEventListener( "submit", function_1 );

• removeEventListener(이벤트, 함수) : eventHandler 삭제