자바스크립트 이벤트 종류

(2022-03-29)

표준 DOM 이벤트, DOMContentLoaded


1. 자바스크립트 이벤트 종류 (타입)

  ※ 전체 이벤트 종류/분류 및 설명이 잘 정리된 참고문헌  ☞ MDN web docs 참조

  ※ jQuery 관련으로는,  ☞ jQuery 이벤트 참조


2. 기본 이벤트

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

  ㅇ click (onclick) : 마우스 버튼 클릭하고 버튼에서 손을 뗌
     - 例) 요소.onclick = "이벤트 처리기";
     - 例) 요소.addEventListener("click", 이벤트 처리기 또는 콜백함수);
  ㅇ dblclick (ondbclick)  : 마우스 버튼을 두 번 연속 더블 클릭 함
  ㅇ mousedown (onmousedown) : 마우스 클릭의 앞 절반 (버튼을 누름)
  ㅇ mouseup (onmouseup) : 마우스 클릭의 뒤 절반 (버튼을 뗌)
     - 드래그 앤 드롭 이벤트 : 위 두 이벤트(mousedown, mouseup)로도 구현 가능
  ㅇ mouseover (onmouseover) : 마우스 포인터가 요소 위에 올라감
  ㅇ mouseout (onmouseout) : 마우스 포인터가 요소 밖으로 벗어남
  ㅇ mousemove (onmousemove) : 마우스 포인터가 움직임
     - 마우스 커서가 해당 요소 내를 움직일 때
     - 또는, 커서의 위치 확인에 유용함
  ㅇ contextMenu : 마우스 우측 클릭시, 컨텍스트 메뉴 보이기 직전에 발생
  ㅇ 마우스 휠 이벤트4. 드래그 앤 드롭 이벤트

  ㅇ dragstart
  ㅇ drag
  ㅇ dragend
  ㅇ dragenter
  ㅇ dragover
  ㅇ dragleave
  ㅇ drop


5. 키보드 이벤트 

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


6. 폼 이벤트

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


7. 값 변경 이벤트

  ㅇ input (oninput) : 값이 입력될 때
     - input (text,checkbox,radio), select, textarea 요소내 값이 입력될 때
  ㅇ change (onchange) : 폼 필드에서 변경이 일어남
     - input 요소텍스트 변동, radio 버튼의 클릭 등
     - input (text,checkbox,radio), select, textarea 요소내 값이 변경될 때
  ㅇ readystatechange : document.readyState 프로퍼티 값이 변경될 때
     - (`loading`,`interactive`,`complete`)


8. 문서(document)/창(window) 이벤트

  ㅇ load (onload)  : HTML 문서 및 추가 자원(이미지 등)들을 `모두 불러왔을 때` 발생
  ㅇ DOMContentLoaded : HTML 문서를 읽고 `DOM 트리 구축을 완료할 때` 발생
     - 위 load와 달리, 이미지 로드,스타일시트 등을 기다리지 않고 바로 시작

  ㅇ readystatechange (onreadystatechange)  ☞ XHR 프로퍼티 참조
  ㅇ timeout (ontimeout)

  ㅇ resize (onresize) : 요소 크기의 변동시
     - 창의 최대화 버튼 또는 창의 크기를 조절
  ㅇ scroll (onscroll) : 페이지 스크롤 이동 
     - 스크롤바를 드래그하거나 또는 키보드(위/아래/home/end 등) 또는 마우스휠 사용
  ㅇ unload (onunload) : 해당 페이지를 벗어남
     - 다른 페이지로의 링크를 클릭, 브라우저 /창을 닫음 등


9. 기타 이벤트텍스트 입력 이벤트
  ㅇ hashchange 이벤트  : 해시 변경시 이벤트 발생 
     - [참고] ☞ location 객체 참조
     - [참고] ☞ MDN web docs, w3schools 참조
  ㅇ error (onerror) :  에러 발생 이벤트

JS 이벤트
   1. JS 이벤트   2. JS 이벤트 종류   3. JS 이벤트 객체   4. JS 이벤트 처리기   5. JS 이벤트 전파   6. 커스템 이벤트  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"