이벤트 알아보기
웹 문서 영역 안에서 이루어지는 동작을 이벤트라고 한다.
마우스 이벤트
마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다.
| 종류 | 설명 |
| click | 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다. |
| dblclick | 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다. |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다. |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다. |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다. |
| mouseup | 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다. |
키보드 이벤트
키보드에서 특정 키를 조작할 때 발생한다.
| 종류 | 설명 |
| keydown | 사용자가 키를 누르는 동안 이벤트가 발생한다. |
| keypress | 사용자가 키를 눌렀을 때 이벤트가 발생한다 |
| keyup | 사용자가 키에서 손을 뗄 때 이벤트가 발생한다. |
문서 로딩 이벤트
서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트이다.
| 종류 | 설명 |
| abort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다. |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다. |
| load | 문서 로딩이 끝나면 이벤트가 발생한다 |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생한다. |
| scroll | 문서 화면이 스크롤되었을 때 이벤트가 발생한다. |
| unload | 문서에서 벗어날 때 이벤트가 발생한다. |
폼 이벤트
폼은 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는모든 요소를 가리킨다.
| 종류 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 이벤트가 발생한다. |
| change | 목록이나 체크 상태 등이 변경되면 이벤트가 발생한다. <input>, <select>, <textarea> 태그에서 사용 가능하다. |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트가 발생한다. <label>, <select>, <textarea>, <button> 태그에서 사용한다. |
| reset | 폼이 리셋되었을 때 이벤트가 발생한다. |
| submit | submit 버튼을 클릭했을 때 이벤트가 발생한다. |
이벤트 처리기 알아보기
이벤트에선 여러 동작을 실행한다.
이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 한다.
이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것이다.
이 방법은 자바스크립트 초기 버전부터 사용했으며 지금도 많이 사용하고 있다.
이벤트 처리기의 기본 형식은 다음과 같다.
먼저 HTML 태그 안에서 'on' 다음에 '이벤트명'을 붙여서 속성 이름을 만들고, 그 다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다.
<태그 on이벤트명 = "함수명">예를 들어 마우스로 클릭했을 때의 이벤트이름은 click이다.
<a>태그 안에 onclick속성을 만들고 속성값으로 실행할 함수를 연결한다.
링크를 클릭하면 알림 창을 표시하는 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#" onclick="alert('버튼을 클릭했습니다')">Green</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다')">Orange</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다')">Purple</a></li>
</ul>
</body>
</html>이벤트가 발생한 후에 여러 가지 명령을 실행해야 한다면 그 명령을 묶어서 하나의 자바스크립트 함수로 만드는게 좋다.
그리고 이벤트가 발생할 때 함수 이름과 인수를 지정해서 실행한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#" onclick="ChangeBg('Green')">Green</a></li>
<li><a href="#" onclick="ChangeBg('Orange')">Orange</a></li>
<li><a href="#" onclick="ChangeBg('Purple')">Purple</a></li>
</ul>
<div id="result" style="width:100%; height:50vw; background-color: black;">
</div>
<script>
function ChangeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
</html>
'📁Web Developing > JavaScript 기초' 카테고리의 다른 글
| 객체 (0) | 2022.06.19 |
|---|---|
| DOM을 이용한 이벤트 처리기 (0) | 2022.06.19 |
| 웹브라우저에서의 자바스크립트 (0) | 2022.06.17 |
| JavaScript 기초 (0) | 2022.04.03 |
| JavaScript 강좌 (0) | 2022.04.03 |
댓글