Event 종류 정리

이벤트란?

웹사이트 이용시 사용자가 조작하는 어떤 동작이나, 브라우저 자체에서 상태를 캐치하여 일어날 수 있는 동작들을 말한다.

예를 들면 문서를 불러들이는 순간(온로딩), 마우스를 요소에 올리는 동작, 클릭하는 동작, 스크롤링 등이 대표적인 이벤트 이다.

 

웹브라우저에서 일어날 수 있는 이벤트를 3가지로 나누어 정리 해보자.

 

1. 문서로딩 이벤트

Event	이벤트가 발생하는 순간
DOMContentLoaded	웹브라우저가 HTML을 리딩하여 DOM 트리구조를 만든 직후에 발생하며, CSS 및 Image, Video, Audio등의 자원이 로딩될때까지 기다리지는 않는다. Document객체에서 발생한다. 그래서 on 이벤트는 적용되지 않고, addEventListener를 사용해야 한다. document.addEventListener('DOMContentLoaded’, () => {    ...   });
load	DOM 트리구조 완성 및 이미지,CSS등의 자원들의 로딩도 끝났을 때 발생
beforeunload	웹페이지를 종료하려고 할때
unload	웹페이지가 종료될 때
abort	웹페이지 로딩중 완료되지 못하고 중지되었을 때
error	웹페이지가 온전히 로딩되지 못했을 때
resize	웹페이지화면의 크기에 변동이 생겼을 때
scroll	웹페이지에 스크롤 동작이 발생했을 때

 

✶ 아래는 DOMContentLoaded 이벤트 참조문서이며, 이 이벤트는 취소할 수 없다.

Window: DOMContentLoaded 이벤트 - Web API | MDN

 

 

2. 마우스 이벤트

아래는 자주 사용되는 마우스 이벤트 목록이다.

Event	이벤트가 발생하는 순간
click	클릭 동작이 발생했을 때
dblclick	더블클릭 동작이 발생했을 때
mouseenter	HTML 요소에 마우스를 올렸을 때,
mouseleave	mouseenter 이벤트발생후 해당 HTML요소에서 벗어날 때
mouseover / mouseout	child element에도 계속해서 이벤트가 발생하므로 주의
mousemove	마우스가 해당요소안에서 움직일 때

 

 

3. 키보드 이벤트

Event	이벤트가 발생하는 순간
keydown	키를 누르는 동안
keyup	키보드에서 손을 떼는 순간(눌렀던 키가 올라왔을 때)
keypress	키를 누르는 순간

 

 

4. 폼 이벤트

Event	이벤트가 발생하는 순간
change	폼요소의 상태가 변경되는 순간
focus	폼요소가 포커스 받았을 때
focusin	폼요소의 자식요소가 포커스 받았을 때
focusout	폼요소의 자식요소가 포커스를 잃었을 때
blur	폼요소가 포커스를 잃었을 때
reset	폼태그에 Reset 되었을 때
submit	폼태그에서 submit 버튼이 클릭 되었을 때