카테고리 없음
이벤트 여러 개 연결하기
깡출깡충
2024. 8. 9. 09:33
목차
- addEventlistener()메서드★
addEventlistener()메서드★
앞에서 배운 이벤트 핸들러는 한 요소에 하나의 이벤트만 연결할 수 있습니다.
하지만 하나의 요소에 여러 이벤트를 연결해야 할 경우 addEventlistener()를 사용하면 하나의 요소에 여러 이벤트를 연결할 수 있습니다.
(기본형)
요소선택.addEventlistener(1.이벤트명, 2.함수, 3.캡쳐여부);
- 1. 이벤트명 : 이벤트 유형. click이나 keypress처럼 이벤트 이름이 들어갑니다.
단, on키워드는 빼고 이벤트 이름만 사용합니다.
- 2. 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정합니다.
함수를 정의할때 event객체를 인수로 받습니다.
이 이벤트 핸들러를 연결할때 만약 함수명으로 연결할 경우 ()는 제외하고 함수의 이름만 넣어야 합니다.
- 3. 캡쳐 여부 : 이벤트를 캡쳐하는 여부를 지정하며 기본값은 false이고 true나 false중에 선택할 수 있습니다.
true면 캡쳐링, false면 버블링한다는 의미입니다. 이벤트 캡쳐링은 DOM의 부모노드에서 자식 노드로 이벤트를 전달하는 것을 의미하고, 버블링은 DOM의 자식노드에서 부모노드로 이벤트를 전달하는 것을 말합니다.
addEventlistener()메서드★ 사용해보기
addEventlistener()메서드★ 입력 예시
<!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/flower.jpg" alt="꽃" id="cover" width="200" />
<script>
// 이미지 태그 cover변수에 할당하기
const cover = document.querySelector("#cover");
// 이미지 위에 마우스가 올라가면 chagepic 이벤트 핸들러 실행
cover.addEventListener("mouseover", chagepic);
// 이미지 밖으로 마우스가 떠나면 originpic 이벤트 핸들러 실행
cover.addEventListener("mouseout", originpic);
function chagepic() {
cover.src = "./img/cup.jpg";
}
function originpic() {
cover.src = "/img/flower.jpg";
}
</script>
</body>
</html>
라이트 박스 만들기 실습하기
라이트 박스 만들기 실습하기(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>라이트박스 만들기</title>
<link rel="stylesheet" href="./css/light_box.css" />
</head>
<body>
<div class="row">
<ul>
<li>
<img
src="./img/image_1.jpg"
alt="이미지"
data-src="./img/image_1.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_2.jpg"
alt="이미지"
data-src="./img/image_2.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_3.jpg"
alt="이미지"
data-src="./img/image_3.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_4.jpg"
alt="이미지"
data-src="./img/image_4.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_5.jpg"
alt="이미지"
data-src="./img/image_5.jpg"
class="pic"
/>
</li>
<li>
<img
src="./img/image_6.jpg"
alt="이미지"
data-src="./img/image_6.jpg"
class="pic"
/>
</li>
</ul>
</div>
<div id="light_box">
<img src="./img/image_1.jpg" alt="이미지" width="500" id="lightbox_img" />
</div>
<!-- 자바스크립트 연결하기 -->
<script src="./js/light_box.js"></script>
</body>
</html>
라이트 박스 만들기 실습하기(css)
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
img {
border: none;
display: block;
}
ul,
li {
list-style: none;
}
.row {
width: 640px;
height: fit-content;
margin: 100px auto;
}
.row ul {
width: 100%;
height: 100%;
display: flex;
gap: 20px;
flex-flow: row wrap;
}
.row li {
width: fit-content;
height: fit-content;
transition: 0.3s;
}
.row li:hover {
filter: brightness(0.8);
}
.row img {
width: 200px;
}
#light_box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
}
라이트 박스 만들기 실습하기(자바스크립트)
"use strict"; // 엄격 모드
// li 안에 있는 작은 썸네일 이미지
const pics = document.querySelectorAll(".pic");
// 라이트 박스(부모박스)
const lightbox = document.querySelector("#light_box");
// 라이트 박스안에 있는 큰 이미지
const lightboxImage = document.querySelector("#lightbox_img");
// 썸네일 이미지를 클릭하면 실행할 이벤트 핸들러
// 반복문으로 HTMLCollaction안에 있는 img태그들에 돌아가면서 이벤트 추가
for (let i = 0; i < pics.length; i++) {
pics[i].addEventListener("click", showLightBox);
}
// 이벤트가 발생하면 실행될 이벤트 핸들러
function showLightBox() {
// 태그에 있는 data-를 넘겨 받아오기
let bigImageLocation = this.getAttribute("data-src");
// 라이트 박스안에 있는 큰 이미지의 경로를 클릭한 해당 이미지로 바꾸기
lightboxImage.setAttribute("src", bigImageLocation);
// 라이트 박스 나타내기
lightbox.style.display = "flex";
}
// 라이트 박스를 클릭하면 라이트 박스를 숨겨서 썸네일 다시 보여주기
lightbox.onclick = function () {
lightbox.style.display = "none";
};
// console.log(pics);