자바스크립트 - 이벤트
이벤트란?
프론트엔드를 배울 때 맨 처음에 다음과 같이 배웠다.
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 |
콘텐츠를 붙여넣기 할 때 |