자바스크립트 이벤트 종류

(2018-11-06)

표준 DOM 이벤트

1. 자바스크립트 이벤트 종류                                           ☞ jQuery 이벤트 참조

  ㅇ 마우스 이벤트 
     - click     : 마우스 버튼 클릭하고 버튼에서 손을 뗌
     - dblclick  : 마우스 버튼을 두 번 연속 더블 클릭 함
     - mousedown : 마우스 클릭의 앞 절반 (버튼을 누름)
     - mouseup   : 마우스 클릭의 뒤 절반 (버튼을 뗌)
        . 드래그 앤 드롭 이벤트 : 위 두 이벤트(mousedown, mouseup)로써 구현
     - mouseover : 마우스 포인터가 요소 위에 올라감
     - mouseout  : 마우스 포인터가 요소 밖으로 벗어남
     - mousemove : 마우스 포인터가 움직임
        . 마우스 커서가 해당 요소내를 움직일 때 또는 커서의 위치 확인에 유용함
     - 마우스 휠 이벤트 등

  ㅇ 키보드 이벤트 
     - keydown  : 키를 누르는 순간
     - keyup    : 키를 눌렀다 떼는 순간
     - keypress : 키를 눌러 문자가 연결되었을 때 
        . 즉, 화면에 글자가 완성되는 경우 만
        . 한편, 누르고있는 동안 화면에 해당 키가 연이어 나타나듯이 해당 이벤트도 계속 발생됨

  ㅇ 폼 이벤트
     - submit : 전송 버튼을 누름 또는 텍스트 필등에서 엔터키를 누름
     - reset  : 폼을 초기화하기 위함
     - change : 폼 필드에서 변경이 일어남 (텍스트 변동,라디오 버튼의 클릭 등)
     - focus  : 웹브라우저가 특정 요소에 집중함 (해당 요소를 클릭,마우스 커서를 놓을때 등)
     - blur   : focus의 반대 ( 누름,필드 밖을 클릭하는 등)
     - select : 텍스트 필드 등의 텍스트를 선택했을 때

  ㅇ 문서(document)/창(window) 이벤트
     - load   : 문서 및 추가 자원(이미지 등)들을 모두 불러왔을 때 발생
     - readystatechange
     - resize : 창의 최대화 버튼 또는 창의 크기를 조절
     - scroll : 스크롤바를 드래그하거나 또는 키보드(위/아래/home/end 등) 또는 마우스휠 사용
     - unload : 해당 페이지를 벗어남 (링크를 클릭, 브라우저 /창을 닫음 등)

  ㅇ 기타 이벤트
     - 텍스트 입력 이벤트, 시간 경과, 에러 발생 등

  ㅇ 기본 이벤트
     * 요소에 개발자가 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트
        . a 요소를 클릭 => 해당 경로로 페이지 이동
        . 브라우저 화면에서 우측 마우스 버튼을 클릭 => ContextMenu 나타남
        . form 요소 내 submit 버튼을 클릭 => 지정된 경로로 내용을 전송
2. 자바스크립트 이벤트 전달 정보

  ※ ☞ 자바스크립트 이벤트 객체 참조
     - `이벤트 객체[JS]` 이란?
       . 특정 이벤트와 연관된 객체로써, 해당 이벤트에 대한 상세한 정보를 담고 있음
       . 즉, 이벤트 핸들러에 전달되는 이벤트 정보를 담고 있음 
          .. 例) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 Ctrl,Alt,Shift 등의 키)


[JS 이벤트] 1. JS 이벤트 2. JS 이벤트 종류 3. JS 이벤트 객체

 
        최근수정     요약목록(시험중)     참고문헌