반응형
Event
브라우저는 처리해야 할 특정 사건이 발생하면
이를 감지하여 이벤트(event)를 발생(trigger) 시킨다.
이벤트가 발생했을 때 호출될 함수를
이벤트 핸들러(event handler)라고 하고,
이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을
이벤트 핸들러 등록이라 한다.
이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해
사용자와 애플리케이션은 상호작용을 할 수 있다.
이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을
이벤트 드리븐 프로그래밍(event-driven programming)이라 한다.
반응형
Event type (이벤트 타입)
마우스 이벤트
// click
마우스 버튼을 클릭했을 때
// dblclick
마우스 버튼을 더블 클릭했을 때
// mousedown
마우스 버튼을 눌렸을 때
// mouseup
누르고 있던 마우스 버튼을 놓았을 때
// mousemove
마우스 커서를 움직였을 때
// mouseenter
마우스 커서를 HTML 요소 안으로 이동햇을 때 (버블링 되지 않는다.)
// mouseover
마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 된다.)
// mouseleave
마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링 되지 않는다.)
// mouseout
마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링 된다.)키보드 이벤트
// keydown
모든 키를 눌렸을 때 발생한다.
※ control, option, shift, tab, delete, enter, 방향 키, 문자, 숫자, 특수 문자 키를 눌렸을 때 발생한다.
단, 문자, 숫자, 특수 문자, enter 키를 눌렸을 때에는 연속적으로 발생하지만
그 외의 키를 눌렸을 때에는 한 번만 발생한다.
// keyup
누르고 있던 키를 놓았을 때 한 번만 발생한다.
※ control, option, shift, tab, delete, enter, 방향 키, 문자, 숫자, 특수 문자 키를 놓았을 때 발생한다.포커스 이벤트
// focus
HTML 요소가 포커스를 받았을 때 (버블링되지 않는다.)
// blur
HTML 요소가 포커스를 잃었을 때 (버블링되지 않는다.)
// focusin
HTML 요소가 포커스를 받았을 때 (버블링 된다.)
// focusout
HTML 요소가 포커스를 잃었을 때 (버블링 된다.)폼 이벤트
// reset
form 요소 내의 reset 버튼을 클릭했을 때(최근에는 사용 안 함)
// submit
1) form 요소 내의 input(text, checkbox, radio), select 입력 필드(textarea 제외)에서 엔터 키를 눌렀을 때
2) form 요소 내의 submit 버튼(<button>, <input type="submit">)을 클릭했을 때
※ submit 이벤트는 form 요소에서 발생한다.값 변경 이벤트
// input
input(text, checkbox, radio), select, textarea 요소의 값이 입력되었을 때
// change
input(text, checkbox, radio), select, textarea 요소의 값이 변경되었을 때
※ change 이벤트는 input 이벤트와 달리 HTML 요소가 포커스를 잃었을 때
사용자 입력이 종료되었다고 인식하여 발생한다.
즉, 사용자가 입력을 하고 있을 때는 input 이벤트가 발생하고
사용자 입력이 종료되어 값이 변경되면 change 이벤트가 발생한다.
// readystatechange
HTML 문서의 로드와 파싱 상태를 나타내는
document.readyState 프로퍼티 값('loading', 'interactive', 'complete')이 변경될 때DOM 뮤테이션 이벤트
// DOMContentLoaded
HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료되었을 때뷰 이벤트
// resize
브라우저 윈도우(window)의 크기를 리사이즈할 때 연속적으로 발생한다.
※ 오직 window 객체에서만 발생한다.
// scroll
웹페이지(document) 또는 HTML 요소를 스크롤할 때 연속적으로 발생한다.리소스 이벤트
// load
DOMContentLoaded 이벤트가 발생한 이후,
모든 리소스(이미지, 폰트 등)의 로딩이 완료되었을 때(주로 window 객체에서 발생)
// unload
리소스가 언로드 될 때(주로 새로운 웹페이지를 요청한 경우)
//abort
리소스 로딩이 중단되었을 때
//error
리소스 로딩이 실패했을 때
Event (1)을 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
