EVENT란? - (1)이벤트의 종류

📌Event를 알아야 하는 이유

1. input창에 값을 입력하고,엔터를 쳤을 때 지하철역을 리스트에 추가하고 싶다면?
2.삭제 버튼을 눌렀을 때 지하철 역을 삭제하고 싶다면?
3.인터렉티브한 사용자 경험을 만들고 싶다면?

위와 같은 이벤트를 유연하게 처리하게 위해서 우리는 반드시 이벤트를 알아야 한다. 동적인 웹은 사용자와 상호작용이 잘 되어야 한다. 그리고 그 상호작용은 어떤 이벤트에 의해 발생한다. 그래서 프론트엔드에서 많은 인터렉션은 모두 Event를 처리하는 것과 깊은 관련이 있다.

📌이 문서를 통해 얻어갈 것

📧이벤트 종류를 최소 3가지 이상 말할 수 있다.
📧DOM Element에 이벤트를 바인딩할 수 있다.
📧이벤트의 흐름을 제어할 수 있다
📧이벤트 종류를 최소 3가지 이상 말할 수 있다.

📌Event란?

웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록한다. 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 '클릭'했을때, '스크롤'을 했을 때, 텍스트를 '입력'했을 때와 같은 것을 의미한다. 우리는 이제 사용자가 지하철 역 이름을 입력하고 엔터를 입력했을 때, 삭제 버튼을 입력했을때와 같은 이벤트를 다룰수 있어야 ㅎ나다.

👉EVENT의 종류

1)사용자 인터페이스 이벤트

사용자의 이벤트를 다루기 위해서는 먼저, 이벤트의 종류에 대해 알아야 한다. 이 글에서는 기본적인 이벤트들을 다룬다. 

사용자 인터페이스(UI)이벤트는 브라우저가 로드한 HTML페이지가 아닌 브라우저 창을 사용할 때 발생하는 이벤트이다. 예를 들어, 페이지가 로드되었다거나 브라우저 창의 크기가 조정된 경우에 발생하는 이벤트들이다. 

사용자 인터페이스(UI) 이벤트 종류

이벤트	설명
load	웹 페이지의 로드가 완료되었을 때
unload	웹페이지가 unload될 때(새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize	브라우저 창의 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤할 때

 

2)키보드 이벤트

키보드 이벤트는 사용자가 키보드를 이용할 때 발생한다. keydown이나 keypress이벤트에 대한 event객체는 어떤 키가 눌렸는지를 알려주는 속성을 가지고 있다.

이벤트	설명
keydown	사용자가 키를 처음 눌렀을 때(키가 눌린 동안은 계속해서 발생)
keyup	사용자가 키를 뗄 때
keypress	사용자가 키를 눌렀다가 떼어서 문자가 화면에 나타나게 되면 발생한다. 화살표 키를 누를 때 keydown 이벤트는 발생하지만 이 이벤트는 발생하지 않는다. 사용자가 키를 계속 누르고 있으면 이벤트가 반복적으로 발생한다.

3)마우스 이벤트

마우스 이벤트는 마우스를 움직이거나 버튼을 클릭했을 때 발생한다.

이벤트	설명
click	마우스를 클릭했을 떄
dbclick	더블클릭 했을 때
mousedown	마우스를 누르고 있을 때
mouseup	요소 위에서 누르고 있던 마우스를 뗄 때
mousemove	마우스를 움직일 때(터치스크린에서는 동작하지 않음)
mouseover	요소 위로 마우스를 움직였을 때(터치스크린에서는 동작하지 않음)
mouseout	요소 바깥으로 마우스를 움직였을 때(터치스크린에서는 동작하지 않음)

3)focus와 blur 이벤트

사용자가 상호작용을 할 수 있는 링크나 폼 요소 같은 HTML 요소는 포커스를 받을 수 있다. 이런 요소들은 자신이 포커스를 갖거나 잃을 때 이벤트를 발생시킨다. 이 이벤트를 활용하는 경우는 다음과 같다.

• 사용자가 폼의 요소들과 상호작용을 할 때 도움말이나 피드백을 제공하고자 하는 경우(대부분 도움말은 실제 사용자가 상호작용을 하는 요소가 아닌 다른 요소를 통해 보여준다.)
• 사용자가 (폼을 제출할 때까지 기다리는 대신) 어느 한 요소에서 다른 요소로 이동했을 때 유효성검사를 수행할 필요가 있는 경우

이벤트	설명
focus/focusin	요소가 포커스를 얻었을 때
blur/focusout	요소가 포커스를 잃었을 때