Do it! HTML+CSS+자바스크립트 웹 표준의 정석
[이벤트와 이벤트처리기]
마우스 이벤트
- click: 사용자가 HMTL 요소를 클릭할 때 발생
- 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버튼을 클릭했을 때 이벤트 발생.이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 한다.
이벤트 처리기의 기본 형식은 HTML 태그 안에서 'on'다음에 '이벤트명'을 붙여 속성 이름을 만들고, 그 다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다.
정리
//기본형
<태그 on이벤트명 = "함수명">
//예시
<a href="#" onclick="alert('click button')"> btn </a>- 이벤트 처리기
- 이벤트: 키보드에서 키를 누르거나 브라우저가 웹 페이지를 불렁노느 것처럼 웹 브라우저나 사용자가 행하는 동작
- 이벤트처리기: 웹 문서에서 이벤트가 발생할 때 그 이벤트에 반응해서 실행하는 함수
