웹 페이지에서 이루어지는 웹 브라우저와 사용자의 상호작용은 브라우저에 이벤트라는 개념이 도입됨으로써 생겨났다.
다시 말해, 자바스크립트 프로그램 안에서 함수가 스스로 작동하는 경우는 거의 없고 사용자의 특정 행동에 대한 반응으로 함수가 실행된다. 이때 사용자가 행하는 특정 '행동' 이 이벤트라고 볼 수 있다.
이벤트와 이벤트 처리기
이벤트란 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다.
앞서 이야기했듯, 키보드의 키를 누르거나 웹 페이지의 버튼을 누르는 행동이 모두 이벤트이다.
하지만 브라우저 안에서 이루어지는 모든 행동이 이벤트는 아니다. 이벤트는 웹 문서 영역 안에서 이루어지는 동작에 한 한다는 것을 유의한다. (ex) 웹 브라우저의 창의 드래그하는 것은 이벤트가 아니다.
자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때 또는 내용을 입력할 때 발생한다. 주요 이벤트는 아래와 같다.
마우스 이벤트
마우스 이벤트는 마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트이다.
| 이벤트 | 설명 |
| click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
| dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
| mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
| mouseout | 요소에 마우스를 아웃했을 때 이벤트가 발생 |
| mousedown | 요소에 마우스를 눌렀을 때 이벤트가 발생 |
| mouseup | 요소에 마우스를 떼었을 때 이벤트가 발생 |
| mousemove | 요소에 마우스를 움직였을 때 이벤트가 발생 |
| contextmenu | context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 |
키 이벤트
키보드 이벤트는 키보드에서 특정 키를 조작할 때 발생하는 이벤트이다.
| 이벤트 | 설명 |
| keydown | 키를 눌렀을 때 이벤트가 발생 |
| keyup | 키를 떼었을 때 이벤트가 발생 |
| keypress | 키를 누른 상태에서 이벤트가 발생 |
문서 로드 이벤트
서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트이다.
| 이벤트 | 설명 |
| load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
| abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
| unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
| resize | 요소에 사이즈가 변경되었을 때 이벤트 발생 |
| scroll | 스크롤바를 움직였을 때 이벤트 발생 |
폼 이벤트
폼(Form)이란 로그인이나 검색/게시판/설문 조사 처럼 사용자가 자료를 입력하는 모든 요소를 가리킨다. 다음은 폼 요소에 내용을 입력하면서 발생할 수 있는 여러 이벤트이다.
| 이벤트 | 설명 |
| focus | 요소에 포커스가 이동되었을 때 이벤트 발생 |
| blur | 요소에 포커스가 벗어났을 때 이벤트 발생 |
| change | 요소에 값이 변경 되었을 때 이벤트 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트 발생 |
| reset | reset 버튼을 눌렀을 때 이벤트 발생 |
| select | input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 |
이벤트 처리기
대부분은 브라우저는 사용자의 행동에 따라 여러 가지 이벤트를 실행하는데, 쇼핑몰을 예로 결제창을 누르면 결제 화면으로 넘어가듯 이벤트가 발생하면 연결 동작이 뒤따른다.
이를 위해 웹 문서에서 이벤트가 발생했을 때 어떤 함수를 실행해야 할지 웹 브라우저에 알려줘야 하는데, 이때 이벤트와 이벤트 처리 함수를 연결해 주는 것이 이벤트 처리기이다.
이벤트 처리기는 이벤트 이름 앞에 on 을 붙여 사용한다.
ex) click 이벤트 발생 시 이벤트 처리기 : onclick
이벤트 처리기는 이벤트 이름 앞에 on을 붙여 사용한다.
[실습] <button> 태그에 이벤트 처리기로 함수 연결하기
아래 레포지터리의 코드 05/event-handler-result.html을 참조한다.
https://github.com/funnycom/js-basic-new본격적으로 프로그램을 만들기 전 이벤트 처리기 사용방법을 익혀보자.
먼저 event-handler-result.html 파일을 생성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="Class/05/css/event.css">
</head>
<body>
<div id="item">
<img src="Class/05/images/flower1.jpg" alt="">
<!--마우스 이벤트 처리기-->
<button class="over" id="open" onmouseover="alert('마우스 커서를 올렸습니다.')">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
</body>
</html>button 소스 추가하기
<button class="over" id="open" onmouseover="alert('마우스 커서를 올렸습니다.')">상세 설명 보기</button>위 코드의 onmouseover 부분에 마우스 이벤트 처리기를 설정할 수 있다.
상세 설명 버튼 생성하기
이번에는 [상세 설명] 버튼을 클릭하면 내용이 화면에 표시되고, [상세 설명 닫기]를 누르면 다시 내용이 보이지 않게 만들어 보자.
먼저 버튼을 눌렀을 때 실행할 함수를 작성한다. 이는 아래 함수를 응용한다.
event.js 파일 응용
function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() { // '상세 설명 닫기'를 클릭했을 때 상세 설명을 감추는 함수
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}event.html 문서를 열고 event.js 문서와 연결한다. 이후 onclick 이벤트 처리기를 사용해 [상세 설명 보기] 버튼과 [상세 설명 닫기] 버튼에 showDetail() 함수와 hideDetail() 함수를 연결한다.
[상세 설명 보기] 클릭
<button class="over" id="open" onclick= "showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
//생략[상세 설명 닫기] 클릭
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>완성 코드
필자는 사이버 지식방의 한계로 js 파일을 외부 파일 연결로 하는 것이 아닌 직접 파일에 작성했다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="file:///tmp/guest-4asqw4/문서/new/ec.css">
</head>
<body>
<script>
function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() { // '상세 설명 닫기'를 클릭했을 때 상세 설명을 감추는 함수
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
</script>
<div id="item">
<img src="file:///tmp/guest-4asqw4/문서/new/flower1.jpg" alt="">
<button class="over" id="open" onclick= "showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다.
톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다.
특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
</body>
</html>CSS
#item {
position:relative;
width:500px;
height:auto;
padding:15px 20px;
margin:auto;
}
button {
background-color:rgba(255,255,255,0.7);;
padding:5px;
border:1px solid #ccc;
font-size:0.8em;
}
.over {
position:absolute;
left:30px;
bottom:30px;
}
.detail {
width:400px;
text-align:left;
line-height:1.8;
display:none;
}
#cover { border: 5px solid transparent;}'JavaScript > [theory]' 카테고리의 다른 글
| [객체] #2. 객체의 프로토타입과 인스턴스 (0) | 2022.10.31 |
|---|---|
| [객체] #1. 객체란? (0) | 2022.10.10 |
| [함수] #3. 함수 표현식 (0) | 2022.10.04 |
| [함수] #2. let과 constant로 변수 선언하기 (0) | 2022.10.03 |
| [함수] #1.함수의 정의와 실행 (0) | 2022.10.02 |
