본문 바로가기
퀴즈

자바스크립트 이벤트 마무리 문제(1)

by dongjin6539 2023. 3. 30.
728x90
반응형

자바스크립트 이벤트 마무리 문제(1)

책 : 모던 자바스크립트 프로그래밍의 정석 220페이지 참고

 

 

마무리 문제 1

  • 문서에는 하나의 이미지가 삽입되어 있습니다. 이 이미지의 위에 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌었다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 다시 원래의 이미지로 바뀌는 소스를 작석해 보세요.

길라잡이

  • 문서에서 <img> 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다.
  • 마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다.
  • 이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다.

 

코드 보기 / 완성화면

 

 

코드 블럭

<!DOCTYPE html>
<html lang="ko">
<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>finalQestion01</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .section {
            margin: 0 auto;
            width: 1200px;
            text-align: center;
        }
        .section h1 {
            margin: 20px;
        }
    </style>
</head>
<body>
    <section class="section">
        <h1>마우스 오버하면 이미지 바꾸기</h1>
        <img src="img/finalQuestion01_01.jpg" alt="이미지">
    </section>

    <script>
        let img = document.querySelector(".section img");

        img.addEventListener("mouseover", () => {
            img.src= "img/finalQuestion01_02.jpg"
        });

        img.addEventListener("mouseout", () => {
            img.src= "img/finalQuestion01_01.jpg"
        });
    </script>
</body>
</html>

 

구성

  • body 태그에 img 태그를 만들어 처음 이미지를 입력해줍니다.
  • style 태그로 이동해서 각 스타일을 입력해줍니다.
  • script 태그로 이동해서 이미지를 선택자를 만들어줍니다.
  • 마우스 오버했을 때 선택자에 이벤트 메서드인 addEventListener("mouseover") 했을 때 변경할 이미지를 이미지의 src 속성에 입력해줍니다.
  • 마우스 아웃했을 때 선택자에 이벤트 메서인 addEventListener("mouseout") 했을 때 다시 원래의 이미지를 가져오게끔 src 속성의 이미지를 다시 입력해줍니다.

 

참고

  • 이벤트 메서드
메서드 설명
addEventListener("mouseover")  요소 위에 포인터 요소 위치가 있을 때
addEventListener("mouseout") 요소 위에 포인터 요소 위치가 벗어 났을 때

 

728x90
반응형