자바스크립트 이벤트 종류

여기서 JS function 호출하려면 앞에 on을 붙여서 선언

예시: onsubmit = "return login();"

 * 세미콜론, return () 잊지말자

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

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

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

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

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

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


2. 자바스크립트 이벤트 전달 정보 : 이벤트 객체

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

  ㅇ 이벤트 객체의 `속성`
     - screenX  : 마우스 커서가 모니터 왼쪽 경계로부터 떨어진 픽셀 거리
     - screenY  : 마우스 커서가 모니터 위쪽 경계로부터 떨어진 픽셀 거리
     - pageX    : 마우스 커서가 창 왼쪽 경계로부터 떨어진 픽셀 거리
     - pageY    : 마우스 커서가 창 위족 경계로부터 떨어진 픽셀 거리
     - offsetX  : 마우스 커서가 요소 영역 상의 X 좌표
     - offsetY  : 마우스 커서가 요소 영역 상의 Y 좌표
     - altKey   : Alt 키 눌려진 여부 (true : 눌려짐, false : 안 눌려짐)
     - ctrlKey  : Ctrl 키 눌려진 여부 
     - shiftKey : 시프트 키 눌려진 여부
     - which    : keypress 이벤트에서 눌려진 키 코드(수치값)
     - target   : 이벤트 타깃이 되는 객체를 가리킴
        . 例) event.target.id : 이벤트 발생된 해당 객체의 id 값을 나타냄

  ㅇ 이벤트 객체의 `메소드`
     - preventDefault()  : 이벤트에 대한 웹브라우저의 기본동작 취소하기
        . 예로써, 링크 클릭시 기본동작인 새 웹페이지 불러오기를 취소 함
        . 이와 동일한 구현 방법은 , 이벤트 함수에서 false를 반환하면 됨
     - stopPropagation() : 이벤트 버블링의 정지
     - stopimmediatePropagation() : 이벤트 버블링의 정지
        . 같은 요소의 다른 이벤트 리스너 실행까지도 멈춤

  ※ [유의할점] 
     - 웹브라우저 마다 다소 다르게 구현되므로 유의해야 함  ☞ jQuery 이벤트 참조

출처: https://jm-web.tistory.com/31 [공부합시다]