[코딩 공부_104] js, 이벤트 종류!

js 이벤트 종류에 대해 알아보자! 

1. 기본 이벤트

 - 요소에 개발자가 굳이 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트

   (ex. a요소를 클릭 → 해당 경로로 페이지 이동)

   (ex. 브라우저 화면에서 우측 마우스 버튼을 클릭 → contextMenu 나타남)

   (ex. form 요소 내 submit 버튼을 클릭 → 지정된 경로로 내용을 전송함)

2. 마우스 이벤트

 - click(onclick=addEventListener) : 마우스 버튼을 클릭하고 버튼에서 손을 땠을 때 생기는 이벤트

 - dbclick(ondbclick) : 마우스 버튼을 두번 연속 더블 클릭함 

 - mousedown(onmousedown) : 마우스 클릭의 앞 절반 (버튼을 누름)

 - mouseup(onmouseup) : 마우스 클릭의 뒤 절반 (버튼을 뗌)

 - mouseover(onmouseover) : 마우스 포인터가 요소 위에 올라감

 - mouseout(onmouseout) : 마우스 포인터가 요소 밖으로 벗어남

 - mousemove(onmousemove) : 마우스 포인터가 움직임, 마우스 커서가 해당 요소 내를 움직일 때, 커서의 위치 확인에 유용함

 - contextMenu : 마우스 우측 클릭시, 컨텍스트 메뉴 보이기 직전에 발생

 - 마우스 휠 이벤트 등

 

3. 드래그 앤 드롭 이벤트

 - dragstart

 - drag

 - dragend

 - dragenter

 - dragover

 - dragleave

 - drop

 

4. 키보드 이벤트

 - keydown(onkeydown) : 키를 누르는 순간

 - keyup(onkeyup) : 키를 눌렀다 떼는 순간

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

 

5. 폼 이벤트

 - submit(onsubmit) : 폼 제출 버튼을 누름

 - reset(onreset) : 폼을 초기화하기 위함

 - change(onchange) : 폼 필드에서 변경이 일어남, input 요소의 텍스트 변동, radio 버튼의 클릭 등

 - focus(onfocus) : 웹 브라우저가 특정 요소에 집중함, 해당 요소를 클릭 / 마우스 커서를 놓을 때 등 

 - blur(onblur) : focus의 반대, 탭 누름 / 필드 밖으로 클릭할 때 등

 - select(onselect) : 텍스트 필드 등의 텍스트를 선택했을 때

 

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

 - load(onload) : HTML 문서 및 추가지원(이미지 등)들을 '모두 불러왔을 때' 발생

 - DOMContentLoaded : HTML 문서를 읽고 'DOM 트리 구축을 완료 할 때' 발생,

   위 load와 달리 이미지 로드, 스타일시트 등을 기다리지 않고 바로 시작

 - readystatechange(onreadystatechange)

 - timeout(ontimeout)

 - resize(onresize) : 요소 크기의 변동시, 창의 최대화 버튼 또는 차으이 크기를 조절

 - scroll(onscroll) : 페이지 스크롤 이동, 스크롤바를 드래그하거나 또는 키보드(위/아래/home/end 등) 또는 마우스 휠 사용

 - unload(onunload) : 해당 페이지를 벗어남, 다른 페이지로의 링크를 클릭 / 브라우저 탭/창을 닫음 등

 

 

 -