javascript-이벤트의 종류
이벤트의 종류
1.마우스 이벤트
:마우스 이벤트는 마우스를 이용해 버튼이나 휠 버튼을 조작할때 사용한다.
[종류]
-click★ : 사용자가 html요소를 클릭할때 이벤트가 발생한다.
-dblclick : 사용자가 html요소를 더블클릭할때 이벤트가 발생한다.
-mousedown : 사용자가 요소 위에서 버튼을 눌렀을때 이벤트가 발생한다.
-mousemove★ : 사용자가 요소 위에서 마우스 포인터를 움직일때 이벤트가 발생한다.
-mouseout : 마우스 포인터가 요소를 벗어날때 이벤트가 발생한다.
-mouseover★ : 마우스 포인터가 요소위로 옮겨질때 이벤트가 발생한다.
-mouseup : 사용자가 요소 위에 높인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.
-wheel★ : 사용자가 마우스 휠을 움직이면 이벤트가 발생한다.
2.키보드 이벤트
:키보드 이벤트는 키보드에서 특정 키를 조작할때 이벤트가 발생한다.
[종류]
-keydown★ : 사용자가 키를 누르는 동안 이벤트가 발생한다.(모든 키 가능. 게임에서 단축키 스킬 사용할때 많이 사용됨.)
-keypress : 사용자가 키를 눌렀을 때 이벤트가 발생한다. (키보드에서 기능키에서는 적용할 수없다.)
-keyup : 사용자가 키에서 손을 뗄 때 이벤트가 발생한다.(검색후에 엔터를 누르면 돋보기모양을 클릭한것처럼 만드는 기능 등에 이용한다.)
3.문서로딩이벤트
:서버에서 엡 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에
보여주는 것과 관련된 이벤트이다. 예를들어 에러가 발생해도 어떤식으로 행동할건지 등을 알려줄때 이용한다.
[종류]
-abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다.
-error★ : 문서가 정확히 로딩되지 않았을때 이벤트가 발생한다.
-load★ : 문서 로딩이 끝나면 이벤트가 발생한다.
-resize : 문서 화면 크기가 바뀌었을 때 이벤트가 발생한다.
-scroll★ : 문서 화면이 스크롤되었을 때 이벤트가 발생한다.
-unload : 문서에서 벗어날때 이벤트가 발생한다.
4.폼 이벤트
:로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소에 내용을 입력하면 이벤트가 발생한다.
[종류]
-blur★: 폼 요소에서 포커스를 잃었을때 이벤트가 발생한다.(포커스의 반대상태)
-change★ : 목록이나 체크 상태 등이 변경되면 이벤트가 발생한다. (예를들어 회원가입창에서 개인정보 수집 체크란에 사용) input,select,textarea태그에서 사용한다.
-focus★ :폼 요소에 포커스가 놓였을때 이벤트가 발생한다.
lable,select,input,textarea,button태그에서 사용한다.
-reset★ :폼이 리셋되었을 때 이벤트가 발생한다.(일반적인 깡통버튼을 만들어놨다가 다른 기능들을 삽입하고싶을때 사용)
-submit★ :submit버튼을 클릭했을 때 이벤트가 발생한다.(입력정보가 전송되기 전에 알럿창을 띄어 재확인시켜주거나 내용을 알려줄때 사용)
이벤트 헨들러
이벤트를 연결하는 가장 기본적인 방법은 이벤트가 발생한 html태그에 이벤트
헨들러를 직접 연결하는 것이다. 이 방법은 자바스크립트 초기 버전부터 많이사용하던 방식이고 지금도 많이 사용한다.
이벤트 핸들러를 연결하는 기본형은 아래와 같다.
먼저 html태그에 on이라는 키워드를 사용하고 다음에 이벤트명을 넣어 속성명을 만들고
실행할 이벤트 함수명을 넣으면 된다.
[기본형]
<태그명 on이벤트명 = "함수명()">
