-
자바스크립트 - 이벤트프론트엔드/JavaScript 2020. 10. 19. 13:10
이벤트란?
프론트엔드를 배울 때 맨 처음에 다음과 같이 배웠다.
HTML은 문서의 구조, CSS는 스타일, 자바스크립트는 동적기능을 목적으로 한다.
자바스크립트의 이벤트는 그러한 목적을 수행하는 동작의 하나다.
즉 간단히 말하면 HTML상에서 일어나는 다양한 행동에 맞게 반응하게 동작을 말한다.
다만 엄밀히 말하면 HTML, DOM을 비롯해 다른 분야에서 사용이 가능하다.
이벤트의 실행
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1> 이벤트 관련 내용입니다. </h1> </body> <script> window.onload = function(){ alert("페이지 로딩이 완료되었습니다."); } </script> </html>위 코드는 자바스크립트 이벤트의 가장 대표적이고 기본적인 이벤트 코드다.
해당 코드는 브라우저에 표시될 내용이 모두 표시되면 경고창으로 메시지를 띄우는 이벤트다.
여기서 'window'는 'window'객체를 가리키고 'onload'는 웹페이지 로드가 완료됨을 나타낸다.
그리고 이러한 행동이 진행되면 경고창으로 메시지를 띄우는 것이다.
즉 DOM을 이용해 객체를 선택하고 그 객체의 행동을 컨트롤하는 것이다.
이벤트의 종류
이벤트의 종류는 정말 무궁무진하다.
주로 쓰는건 외울 수 있지만 생소한 것은 찾아서 진행하는 것이 좋다.
1. UI 이벤트
이벤트
설명
load
웹페이지 로드가 완료되었을 때
unload
웹페이지가 언로드 될 때
error
브라우저가 자바스크립트 오류를 내거나 에러났을 때
resieze
브라우저 창의 크기를 조절했을 때
scroll
사용자가 페이지를 위 아래로 스크롤 할 때
select
텍스트를 선택했을 때
2. 키보드 이벤트
이벤트
설명
keydown
키를 누르고 있을 때
keyup
누르고 있던 키를 뗄 때
keypress
키를 누르고 뗐을 때
3. 마우스 이벤트
이벤트
설명
click
마우스 버튼을 클릭했을 때
dbclick
마우스 버튼을 더블 클릭했을 때
mousedown
마우스 버튼을 누르고 있을 때
mouseup
누르고 있던 마우스 버튼을 뗐을 때
mousemove
마우스를 움직일 때
mouseover
마우스를 해당 요소 위로 움직였을 때
mouseout
마우스를 해당 요소 밖으로 움직였을 때
4. Focus 이벤트
이벤트
설명
focus
요소가 포커스를 받았을 때
blur
요소가 포커스를 잃었을 때
focusin
요소가 포커스를 받았을 때 (버블링 발생)
focusout
요소가 포커스를 잃었을 때 (버블링 발생)
5. form 이벤트
이벤트
설명
submit
form을 submit 할때
reset
reset 버튼 사용시
6. clipboard (클립보드) 이벤트
이벤트
설명
cut
콘텐츠를 잘라낼 때
copy
콘텐츠를 복사할 때
paste
콘텐츠를 붙여넣기 할 때
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 - 이벤트 버블링과 캡쳐링 (0) 2020.10.20 자바스크립트 - 이벤트 핸들러 (0) 2020.10.19 자바스크립트 고차함수 - find(), findindex() (0) 2020.10.06 자바스크립트 고차함수 - every(), some() (0) 2020.10.06 자바스크립트 고차함수 - reduce() (0) 2020.10.03