반응형
Preface
이번 장에선 이벤트란 무엇인지, 이벤트 처리기는 어떻게 사용하는 것인지 알아봤다.
계속해서 DOM을 언급하는 것으로 보아, 뒤쪽의 DOM을 공부한 후 이벤트를 다시 다룰 것 같다.
마무리 문제를 풀 때 딱히 막히는 부분이 없는 것으로 보아 기본적인 문법 구조만 익숙해지면 파이썬처럼 부담 없이 사용할 수 있을 듯하다.
6. 이벤트와 이벤트 처리기
- 이벤트: 웹 브라우저나 사용자가 행하는 어떤 동작
→ 웹 문서 영역 안에서 이루어지는 동작만을 말한다.
- 마우스 이벤트
| 종류 | 설명 |
| click | 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다. |
| dbclick | 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다. |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다. |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다. |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다. |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다. |
| mouseup | 사용자가 요소 위에 놓인 마우스 버튼에서 손을 땔 때 이벤트가 발생한다. |
- 키보드 이벤트
| 종류 | 설명 |
| keydown | 사용자가 키를 누르는 동안 이벤트가 발생한다. |
| keypress | 사용자가 키를 눌렀을 때 이벤트가 발생한다. |
| keyup | 사용자가 키에서 손을 땔 때 이벤트가 발생한다. |
- 문서 로딩 이벤트
| 종류 | 설명 |
| abort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다. |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다. |
| load | 문서 로딩이 끝나면 이벤트가 발생한다. |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생한다. |
| scroll | 문서 화면이 스크롤되었을 때 이벤트가 발생한다. |
| unload | 문서에서 벗어날 때 이벤트가 발생한다. |
-폼 이벤트
| 종류 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 이벤트가 발생한다. |
| change | 목록이나 체크 상태 등이 변경되면 이벤트가 발생한다. |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트가 발생한다. |
| reset | 폼이 리셋되었을 때 이벤트가 발생한다. |
| submit | submit 버튼을 클릭했을 때 이벤트가 발생한다. |
- 이벤트 처리기(핸들러): 웹 문서에서 이벤트가 발생하면 처리하는 함수
→ 가장 기본적인 방법: 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것
<태그 on이벤트명 = "함수명">
- 클릭했을 때 배경색이 바뀌는 코드
<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"></div>
<script>
function changeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
7. DOM을 이용한 이벤트 처리기
- 웹 요소를 클릭했을 때 실행할 함수를 연결하는 방법
웹 요소.onclick = 함수;
- 웹 요소를 가져오는 방법: querySelector( ) 함수를 사용한다.
1) 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택자를 넣을 수 있다.
2) 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다.
// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
// document.querySelector("#change").onclick = changeColor;
// function changeColor() {
// document.querySelector("p").style.color = "#f00";
// }
// 방법 3 : 직접 함수를 선언
// document.querySelector("#change").onclick = function() {
// document.querySelector("p").style.color = "#f00";
// };
- 두 수를 입력받아 크기 비교를 하는 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
</head>
<body>
<script>
var num1 = parseInt(prompt("비교할 첫 번째 숫자: "));
var num2 = parseInt(prompt("비교할 두 번째 숫자: "));
compareTwo(num1, num2);
function compareTwo(x, y) {
if (x === y) {
alert(x + "와(과) " + y + "는 같습니다.");
}
else if (x > y) {
alert( x + "(이)가 " + y + "보다 큽니다.");
}
else {
alert(y + "(이)가 " + x + "보다 큽니다.");
}
}
</script>
</body>
</html>
728x90
반응형
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [JS] 문서 객체 모델(DOM) (0) | 2022.08.11 |
|---|---|
| [JS] 자바스크립트와 객체 (0) | 2022.08.08 |
| [JS] 함수와 이벤트 (1) (0) | 2022.08.06 |
| [JS] 자바스크립트 기본 문법 (0) | 2022.08.04 |
| [JS] 자바스크립트와 첫 만남 (0) | 2022.08.03 |
댓글