-
이벤트 여러 개 연결하기카테고리 없음 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);