[JS] EVENT

 

이벤트(EVENT)

웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록함.

이벤트(event)는 어떤 사건을 의미하는데, 브라우저에서의 사건이란 사용자가 클릭했을 '때', 스크롤을 했을 '때', 텍스트를 입력했을 '때'와 같은 것을 의미함. 

 

---

 

이벤트의 종류

사용자의 이벤트를 다루기 위해서는 먼저, 이벤트의 종류에 대해 알아야함.

 

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

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

- load : 웹페이지의 로드가 완료되었을 때

- unload : 웹 페이지가 unload될 때(새로운 페이지를 요청한 경우)

- error : 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우

- resize : 브라우저 창의 크기를 조정했을 때

- scroll : 사용자가 페이지를 위아래로 스크롤 할 때

 

2) 키워드 이벤트

키보드 이벤트는 사용자가 키보드를 이용할 때 발생함.

- keydown : 사용자가 키를 처음 눌렀을 때(키가 눌린 동안은 계속해서 발생)

- keyup : 사용자가 키를 뗄 때

- keypress : 사용자가 키를 눌렀다가 떼어서 문자가 화면에 나타나게 되면 발생함.  

                화살표 키를 누를 때 keydown이벤트는 발생하지만 이 이벤트는 발생하지 않음. 

               사용자가 키를 계속 누르고 있으면 이벤트가 반복적으로 발생함.

 

3) 마우스 이벤트

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

- click : 마우스를 클릭했을 때

- dbclick : 마우스를 더블 클릭했을 때

- mousedown : 마우스를 누르고 있을 때

- mouseup : 요소 위에서 누르고 있던 마우스를 뗄 때

- mousemove : 마우스를 움직일 때(터치스크린에서는 동작하지 않음)

- mouseover : 요소 위로 마우스를 움직였을 때(터치스크린에서는 동작하지 않음)

- mouseout : 요소 바깥으로 마우스를 움직였을 때(터치스크린에서는 동작하지 않음)

 

4) focus와 blur 이벤트

사용자가 상호작용을 할 수 있는 링크나 폼 요소 같은 HTML 요소는 포커스를 받을 수 있음.

이런 요소들은 자신이 포커스를 갖거나 잃을 때 이벤트를 발생시킴.

이 이벤트를 활용하는 경우는 다음과 같음.

(사용자가 폼의 요소들과 상호작용을 할 때 도움말이나 피드백을 제공하고자 하는 경우(대부분 도움말은 실제 사용자가 상호작용을 하는 요소가 아닌 다른 요소를 통해 보여줌),

사용자가 (폼을 제출할 때까지 기다리는 대신) 어느 한 요소에서 다른 요소로 이동했을 때 유효성검사를 수행할 필요가 있는 경우))

- focus/focusin : 요소가 포커스를 얻었을 때

- blur/focusout : 요소가 포커스를 잃었을 때