대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행됨. 이처럼 버튼을 클릭하거나 항목을 선택하는 것을 이벤트(event)라고 하고, 이벤트가 발생했을 때 실행하는 함수를 이벤트 처리기라고 함.
이벤트 알아보기
① 마우스 이벤트
click: 사용자가 HTML 요소를 클릭할 때 이벤트가 발생dblclick: 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생mousedown: 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생mousemove: 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생mouseover: 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생mouseout: 마우스 포인터가 요소를 벗어날 때 이벤트가 발생mouseup: 사용자가 요소 위에 놓인 마우스 버튼에서 손을 땔 때 이벤트가 발생
② 키보드 이벤트
keydown: 사용자가 키를 누르는 동안 이벤트가 발생keypress: 사용자가 키를 눌렀을 때 이벤트가 발생keyup: 사용자가 키에서 손을 뗄 대 이벤트가 발생
③ 문서 로딩 이벤트
abort: 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생error: 문서가 정확히 로딩되지 않았을 대 이벤트 발생load: 문서 로딩이 끝나면 이벤트가 발생resize: 문서 화면 크기가 바뀌었을 때 이벤트가 발생scroll: 문서 화면이 스크롤되었을 때 이벤트가 발생unload: 문서에서 벗어날 때 이벤트가 발생
④ 폼 이벤트
blur: 폼 요소에 포커스를 잃었을 대 이벤트 발생change: 목록이나 체크 상태 등이 변경되면 이벤트가 발생<input>,<select>,<textarea>태그에서 사용
focus: 폼 요소에 포커스가 놓였을 때 이벤트가 발생<label>,<select>,<textarea>,<button>태그에서 사용
reset: 폼이 리셋되었을 때 이벤트 발생submit: submit 버튼을 클릭했을 때 이벤트 발생
이벤트 처리기 알아보기
웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러(event handler) 라고 함. 이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것
<HTML태그 on이벤트명 = "함수명">
- 버튼 클릭하면 알림 창 표시하기
- 버튼을 클릭하면 배경색 바꾸기
