카테고리 없음
자바스크립트 이벤트
깡출깡충
2024. 8. 7. 14:33
목차
- 이벤트의 종류
- 이벤트 핸들러
이벤트의 종류
1. 마우스 이벤트
: 마우스 이벤트는 마우스를 이용해 버튼이나 휠 버튼을 조작할때 사용합니다.
(종류)
- click ★ : 사용자가 html요소를 클릭할때 이벤트가 발생합니다.
- dblclick : 사용자가 html요소를 더블클릭할때 이벤트가 발생합니다.
- mousedown : 사용자가 요소 위에서 버튼을 눌렀을때 이벤트가 발생합니다.
- mousemove★ : 사용자가 요소 위에서 마우스 포인터를 움직일때 이벤트가 발생합니다.
- mouseout : 마우스 포인터가 요소를 벗어날때 이벤트가 발생합니다.
- mouseover★ : 마우스 포인터가 요소 위로 옮겨질때 이벤트가 발생합니다.
- mouseup : 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생합니다.
- whell★ : 사용자가 마우스 휠을 움직이면 이벤트가 발생합니다.
2. 키보드 이벤트
: 키보드 이벤트는 키보드에서 특정 키를 조작할때 이벤트가 발생합니다.
(종류)
- keydown★ : 사용자가 키를 누르는 동안 이벤트가 발생합니다.
- keypress : 사용자가 키를 눌렀을때 이벤트가 발생합니다.
- keyup : 사용자가 키에서 손을 뗄 때 이벤트가 발생합니다.
3. 문서로딩이벤트
: 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련 된 이벤트 입니다.
(종류)
- abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을때 이벤트가 발생합니다.
- error★ : 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
- load★ : 문서 로딩이 끝나면 이벤트가 발생합니다.
- resize : 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
- scroll★ : 문서 화면이 스크롤 되었을 때 이벤트가 발생합니다.
- unload : 문서에서 벗어날때 이벤트가 발생합니다.
4. 폼 이벤트
: 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소에 내용을 입력하면 이벤트가 발생합니다.
(종류)
- blur★ : 폼 요소에서 포커스를 잃었을 때 이벤트가 발생합니다.
- change★ : 목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다.
<input>, <select>, <textarea>태그에서 사용합니다.
- focus★ : 폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다.
<label>, <select>, <input>, <textarea>, <button>태그에서 사용합니다.
- reset★ : 폼이 리셋 되었을 때 이벤트가 발생합니다.
- submit★ : submit 버튼을 클릭했을 때 이벤트가 발생합니다.
이벤트 핸들러
이벤트를 연결하는 가장 기본적인 방법은 이벤트가 발생한 html태그에 이벤트 핸들러를 직접 연결하는 것입니다.
이 방법은 자바스크립트 초기 버전부터 많이 사용하던 방식이고 지금도 많이 사용합니다.
이벤트 핸들러를 연결하는 기본형은 아래와 같습니다.
먼저 html태그에 on이라는 키워드를 사용하고 다음엔 이벤트명을 넣어 속성명을 만들고 실행할 이벤트 함수명을 넣으면 됩니다.
(기본형)
<태그명 on이벤트명 = '함수명()'>
클릭 이벤트 사용해보기(클릭하면 배경이 바뀌는 이벤트)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트 이벤트</title>
<style>
.btnbox {
width: 500px;
height: fit-content;
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.box {
width: 150px;
height: 40px;
border: 1px solid thistle;
text-align: center;
line-height: 36px;
border-radius: 20px;
}
#colorbox {
width: 500px;
height: 300px;
border: 1px solid thistle;
}
</style>
</head>
<body>
<div class="btnbox">
<div class="box" onclick="changeBg('pink')">pink</div>
<div class="box" onclick="changeBg('skyblue')">skyblue</div>
<div class="box" onclick="changeBg('yellow')">yellow</div>
</div>
<div id="colorbox"></div>
<script>
// <!-- 클릭하면 배경이 바뀌는 이벤트 -->
function changeBg(color) {
let colorBox = document.querySelector("#colorbox");
colorBox.style.backgroundColor = color;
}
</script>
</body>
</html>
1. 이벤트 실습하기(버튼 클릭하면 나타내기, 사라지기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트 실습</title>
<style>
.bigbox {
width: fit-content;
height: auto;
}
.imgbox {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.imgbox > img {
max-width: 100%;
position: absolute;
top: -200px;
left: 0;
}
.imgbox > button {
position: absolute;
bottom: 20px;
left: 20px;
border: 1px solid thistle;
padding: 5px 16px;
background-color: black;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.textbox {
width: 500px;
height: 300px;
box-sizing: border-box;
padding-left: 20px;
display: none;
}
.textbox > button {
bottom: 20px;
left: 20px;
border: 1px solid thistle;
padding: 5px 16px;
background-color: black;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="imgbox">
<img src="./img/remon.jpg" alt="레몬" />
<button type="button" onclick="showDetail()">상세설명보기</button>
</div>
<div class="textbox">
<h3>예쁜 사진</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam,
quos earum officiis sapiente iure similique dignissimos animi omnis
doloribus quis est odit molestiae quisquam non at officia, nam
corrupti iusto?
</p>
<button type="button" onclick="hideDetail()">상세설명 닫기</button>
</div>
</div>
<!-- 자바스크립트 -->
<script>
// 상세 설명을 화면에 표시하는 함수
function showDetail() {
// 상세설명 보여주기
document.querySelector(".textbox").style.display = "block";
// 상세설명 보기 버튼 숨기기
document.querySelector(".imgbox > button").style.display = "none";
}
// 상세 설명을 화면에서 숨기는 함수
function hideDetail() {
// 상세설명 숨기기
document.querySelector(".textbox").style.display = "none";
// 상세설명 보기 버튼 나타내기
document.querySelector(".imgbox > button").style.display = "block";
}
</script>
</body>
</html>
2. 좀 더 효율적인 이벤트 함수 만들기(버튼 클릭하면 나타내기, 사라지기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트 실습</title>
<style>
.bigbox {
width: fit-content;
height: auto;
}
.imgbox {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.imgbox > img {
max-width: 100%;
position: absolute;
top: -200px;
left: 0;
}
.imgbox > button {
position: absolute;
bottom: 20px;
left: 20px;
border: 1px solid thistle;
padding: 5px 16px;
background-color: black;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.textbox {
width: 500px;
height: 300px;
box-sizing: border-box;
padding-left: 20px;
display: none;
}
.textbox > button {
bottom: 20px;
left: 20px;
border: 1px solid thistle;
padding: 5px 16px;
background-color: black;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="imgbox">
<img src="./img/lemon.jpg" alt="레몬" />
<button type="button" onclick="showDetail()">상세설명보기</button>
</div>
<div class="textbox">
<h3>예쁜 사진</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam,
quos earum officiis sapiente iure similique dignissimos animi omnis
doloribus quis est odit molestiae quisquam non at officia, nam
corrupti iusto?
</p>
</div>
</div>
<!-- 자바스크립트 -->
<script>
// 효율적인 이벤트 함수 만들기
let result = true;
// 상세 설명을 화면에 표시하는 함수
function showDetail() {
if (result == true) {
// 상세설명 보여주기
document.querySelector(".textbox").style.display = "block";
result = false;
} else {
// 상세설명 숨기기
document.querySelector(".textbox").style.display = "none";
result = true;
}
}
</script>
</body>
</html>
이벤트 처리 방식1
앞 예제에서 사용하던 방법은 html이 주인이 되어
자바스크립트의 함수를 호출해서 사용하는 베이직한 방식입니다.
하지만 DOM을 사용하면 자바스크립트가 주인이 되어
HTML요소를 가져와서 이벤트 처리를 하게 만들 수 있습니다.
중요한 점은 이벤트 처리를 HTML이 하게 만드는가,
혹은 자바스크립트가 처리하게 만드는가를 중심을 잡고 코드를 처리해야 합니다.
웹 요소를 클릭했을 때 실행할 함수를 연결하려면 아래 기본형을 사용해야 합니다.
이 방식은 자바스크립트가 주인이 되어 이벤트를 처리하는 방식 중 하나 입니다.
(기본형)
요소명.on이벤트명 = 함수명;
function 함수명(){ 이벤트 자바스크립트 코드~~; }
ex) document.querySelector("#아이디명").onclick = 함수명;
이벤트 처리 방식2
이벤트를 적용하고 싶은 태그를 변수에 담아 두었다가 이벤트를 연결하는 방식입니다.
이 방식은 여러 태그에 동일한 이벤트를 적용하고 싶을 때 많이 사용합니다.
(기본형)
const 변수명1 = 요소선택;
const 변수명2 = 요소선택;
const 변수명3 = 요소선택;
function 함수명(){ 이벤트 자바스크립트 코드~~; }
변수명1.on이벤트명 = 함수명;
변수명2.on이벤트명 = 함수명;
변수명3.on이벤트명 = 함수명;
ex)
const tag1 = document.querySelector("#아이디명");
const tag2 = document.querySelector("#아이디명");
function 함수명(){ 이벤트 자바스크립트 코드~~; }
tag1.onclick = 함수명;
tag.onmouseover = 함수명;
이벤트 처리 방식3
태그에 직접 원하는 이벤트를 적용하는 방식 입니다.
이 방식은 익명함수를 사용하고 보통 해당 태그만 이 이벤트를 사용할 때 많이 쓰는 방식입니다.
(기본형)
요소명.on이벤트명 = function(){ 이벤트 자바스크립트 코드~~; }
ex) document.querySelector("#아이디명").onclick = function(){
이벤트 자바스크립트 코드~~;
}
DOM의 이벤트 객체
DOM에는 이벤트 정보를 저장하는 event객체가 있습니다.
이 객체는 웹 문서에서 이벤트가 발생한 요소가 무엇인지,
어떤 이벤트가 발생했는지 등의 정보가 들어있습니다.
이벤트 객체는 이벤트 함수의 매개변수 자리에 event또는 e라는 변수명으로 받아올 수 있습니다.
이벤트 객체의 프로퍼티와 메서드
(프로퍼티)
- altkey : 이벤트가 발생했을 때 Alt키가 눌렸는지에 대한 여부를 boolean값으로 반환합니다.
- button : 마우스에서 누른 버튼의 키 값을 반환합니다.
- charCode : keyoress 이벤트가 발생했을 때 어떤 키를 눌렀는지 유니코드값으로 반환합니다.
- clientX : 이벤트가 발생한 가로 위치 좌표를 반환합니다.
- clientY : 이벤트가 발생한 세로 위치 좌표를 반환합니다.
- ctrlkey : 이벤트가 발생했을 때 ctrl키가 눌렸는지에 대한 여부를 boolean값으로 반환합니다.
- pageX : 현재 문서를 기준으로 이벤트가 발생한 가로 위치 좌표를 반환합니다.
- pageY : 현재 문서를 기준으로 이벤트가 발생한 세로 위치 좌표를 반환합니다.
- screenX : 현재 화면을 기준으로 이벤트가 발생한 가로 위치 좌표를 반환합니다.
- screenY : 현재 화면을 기준으로 이벤트가 발생한 세로 위치 좌표를 반환합니다.
shiftkey : 이벤트가 발생했을 때 shift키가 눌렸는지에 대한 여부를 boolean값으로 반환합니다.
- target : 이벤트가 최초로 발생한 대상(태그)를 반환합니다.
- timeStamp : 이벤트가 발생한 시간을 반환합니다.
- type : 발생한 이벤트의 이름을 반환합니다.
- which : 키보드에 관련 된 이벤트가 발생할 때 키의 유니코드 값을 반환합니다.
(메서드)
- preventDefault() : 이벤트를 취소할 수 있는 경우 취소합니다. a태그나 button처럼 기본 기능이 있을 때 기본 기능을 취소할 때 사용합니다.
DOM의 이벤트 객체 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트 객체</title>
</head>
<body>
<img src="./img/lemon.jpg" alt="레몬" width="200" />
<script>
let imageTag = document.querySelector("img");
imageTag.onclick = function (e) {
alert(
"이벤트 유형 :" +
event.type +
", 이벤트 발생 위치:" +
event.pageX +
"," +
event.pageY
);
};
</script>
</body>
</html>