0605
- 이벤트와 이벤트 리스너
- 마우스 이벤트
- 폼 이벤트
- 키보드 이벤트
- 문서 로딩 이벤트
- HTML 요소에 이벤트 리스너 적용하기
안녕하세요!
트윅스스터디 그 세번째 과제에서는 자바스크립트의 이벤트와 이벤트 리스너에 대해 공부해보도록 하겠습니다.
🧁1. 이벤트란?
이벤트란 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 입니다.
이는 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 겁니다.
예를 들어서 유저가 웹페이지의 버튼을 클릭했을 때 다음 페이지로 넘어가는 것이 이벤트인 것이죠.
🧁2. 이벤트 리스너
👉2.1. 이벤트 리스너가 뭔가요?
그렇다면 이벤트 리스너는 뭔가요? 이벤트를 듣는건가요?
이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다.
이벤트를 듣는다고 이해해도 좋겠네요. 듣고 어떤 일을 수행하는 것이 바로 이벤트 리스너입니다.
👉2.2. 이벤트 리스너 등록하는 방법은?
이벤트 리스너는 해당 객체나 요소에 등록되어야만 호출될 수 있는데요, 등록하는 방법은 다음과 같습니다.
- 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법
- 객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법
👉2.3. 이벤트 리스너를 등록해보자!
이번에는 한 번 html과 js 두 가지로 이벤트 리스너를 등록해보겠습니다.
- 자바스크립트 코드에서 프로퍼티로 등록
- HTML 태그에 속성으로 등록
첫 번째로는 js로 등록해보겠습니다.
window.onload = function() {
var text = document.getElementById("text"); // 아이디가 text인 요소를 선택
text.innerHTML = "HTML 문서가 로드되었습니다.";
}위의 함수는 html문서가 로드될 때 실행됩니다.
두 번째로는 html태그의 속성으로 바로 이벤트 리스너를 등록할 수도 있습니다.
<p onclick="alert('문자열을 클릭했어요!')">이 문자열을 클릭해보세요!</p>
html문서를 실행한 뒤 문자열을 클릭하면 다음과 같은 창이 뜨게 되겠네요!
하지만 html을 사용하는 방법은 가독성이 안 좋아지며 유지보수가 힘들어진다는 단점이 있습니다.
🧁3. 마우스 이벤트
👉3.1. 마우스 이벤트가 뭔가요?
마우스 이벤트란 마우스와 관련된 이벤트입니다.
마우스를 클릭하거나 움직이는 등과 관련된 이벤트인 것이죠.
그럼 종류를 한 번 보실까요?
👉3.2. 마우스 이벤트 종류
마우스 이벤트 종류는 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
mouseout | 요소에 마우스를 아웃했을 때 이벤트가 발생 |
mousedown | 요소에 마우스를 눌렀을 때 이벤트가 발생 |
mouseup | 요소에 마우스를 떼었을 때 이벤트가 발생 |
mousemove | 요소에 마우스를 움직였을 때 이벤트가 발생 |
contextmenu | context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 |
👉3.3. 마우스 이벤트(click)를 사용해보자!
마우스 이벤트 중 하나인 click이벤트를 활용하여 이벤트를 어떻게 작성해야하는지에 대한 감을 잡아보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width : 500px;
height : 200px;
background-color : black;
display : flex;
justify-content : center;
align-items : center;
}
.inner{
width : 100px;
height : 100px;
background-color : pink;
}
.text {
color : white;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<p class="text"></p>
</div>
</div>
<script>
const div = document.querySelector('.outer');
let text = document.querySelector('.text');
let num = 1;
div.addEventListener('click', () =>{
text.innerHTML = `클릭! ${num}`;
num++;
});
</script>
</body>
</html>출처 - 예리Yelee::개발기록
해당 html문서를 실행하게 되면
다음과 같이 네모를 클릭했을 때 횟수가 늘어나는 이벤트가 실행되게 됩니다.
🧁4. 폼 이벤트
👉4.1. 폼(form)이 뭔가요?
폼이란 사용자가 정보를 입력할 수 있도록 만들어진 웹 요소입니다.
- 텍스트를 입력할 수 있는
text - 버튼인
button
등등이 form태그에 해당합니다.
👉4.2. 폼 이벤트 종류
폼 이벤트 종류는 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
focus | 요소에 포커스가 이동되었을 때 이벤트 발생 |
blur | 요소에 포커스가 벗어났을 때 이벤트 발생 |
change | 요소에 값이 변경 되었을 때 이벤트 발생 |
submit | submit 버튼을 눌렀을 때 이벤트 발생 |
reset | reset 버튼을 눌렀을 때 이벤트 발생 |
select | input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 |
👉4.3. 폼 이벤트(onblur, onfocus)를 사용해보자!
폼 이벤트 중 onblur와 onfocus를 사용해보며 폼 이벤트 사용법을 익혀봅시다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.invalid {
border-color: red;
}
#error {
color: red
}
</style>
<body>
이메일: <input type="email" id="input"> <br />
비밀번호: <input type="text" id="passwd">
<div id="error"></div>
<script>
input.onblur = function () {
if (!input.value.includes('@')) { // @ 유무를 이용해 유효한 이메일 주소가 아닌지 체크
input.classList.add('invalid');
error.innerHTML = '올바른 이메일 주소를 입력하세요.'
} else {
this.classList.remove("invalid");
}
};
input.onfocus = function () {
if (this.classList.contains('invalid')) {
// 사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움
this.classList.remove('invalid');
error.innerHTML = "";
}
};
</script>
</body>
</html>onblur는 요소에 포커스가 벗어났을 때 이벤트가 발생합니다.
따라서 이메일 입력 form에 올바른 이메일 주소가 입력되지 않았을 경우에 빨간색으로 "올바른 이메일 주소를 입력하세요."라는 글씨가 나타나게 됩니다.
onfocus는 요소에 포커스가 이동되었을 때 이벤트가 발생합니다.
따라서 이메일을 입력하려고 이메일 입력 form에 커서가 이동되면 아래의 빨간 주의사항 글씨가 사라지게 됩니다.
html만으로도 이벤트를 적용시킬 수 있습니다.
<input type="button" value="click" class="btn" onclick="alert('click')">
<input type="button" value="over" class="btn" onmouseover="alert('mouseover!')">
<input type="button" value="dbclick" class="btn" ondblclick="alert('dbclick!')">각각의 form태그는 click over dbclick의 이벤트를 발생시킵니다.
🧁5. 키보드 이벤트
👉5.1. 키보드 이벤트란?
키보드 이벤트란 키보드에서 특정 키를 조작할 때 발생하는 이벤트 입니다.
👉5.2. 키보드 이벤트의 종류
키보드 이벤트의 종류는 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
keydown | 키를 눌렀을 때 이벤트가 발생 |
keyup | 키를 떼었을 때 이벤트가 발생 |
keypress | 키를 누른 상태에서 이벤트가 발생 |
👉5.3. 키보드 이벤트를 사용해보자!
키보드 이벤트 중 keydown와 keyup을 사용하여 숫자를 눌렀을 때 해당 박스의 크기가 커지는 예제를 만들어봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 2rem;
text-align: center;
color: white;
background: black;
border-radius: 1rem;
padding: 2rem;
transition: all .5s ease;
}
.pressed {
background: tomato;
transform: scale(1.2);
}
body {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-content: center;
grid-gap: 1rem;
padding: 1rem;
height: 100vh;
background: skyblue;
}
</style>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<script>
window.addEventListener("keydown", e => {
const key = document.getElementById(e.key);
if (key) key.classList.add('pressed');
});
window.addEventListener("keyup", e => {
const key = document.getElementById(e.key);
if (key) key.classList.remove('pressed');
});
</script>
</body>
</html>위의 코드를 실행시키면 2번키를 눌렀을 때 아래와 같이 2번 블럭의 크기가 커지는 이벤트가 발생합니다.
🧁6. 문서 로딩 이벤트
👉6.1. 문서 로딩 이벤트가 뭔가요?
문서 로딩 이벤트란 웹이 로딩중이거나 스크롤하였을 때의 이벤트들을 말합니다.
👉6.2. 문서 로딩 이벤트 종류
문서 로딩 이벤트의 종류는 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
error | 문서가 정확히 로딩되지 않았을 때 발생 |
unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
resize | 요소에 사이즈가 변경되었을 때 이벤트 발생 |
scroll | 스크롤바를 움직였을 때 이벤트 발생 |
이번 포스팅에서는 js의 다양한 이벤트에 대해 공부해보았습니다.
이벤트들이 워낙 많기도 하고 이 많은 이벤트를 어떻게 적용시켜야할지에 대해 살짝 막막하기도 하네요..
문서 로딩 이벤트를 공부하다보니 DOM 객체라는 것이 많이 나오게 되었는데,
다음 포스팅에서는 DOM 객체와 이벤트 리스너를 주제로 정리해서 들고오겠습니다.
