221206 dom_09.html (mouseover)

2022. 12. 6. 09:56·Skills/JavaScript
<!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>DOM_event</title>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let img = document.querySelector(".img > img");

        // 방법1.
        img.onmouseover = over;
        img.onmouseout = out;

        function over() {
          img.src = "./images/new01_on.jpg";
        }
        function out() {
          img.src = "./images/new01_off.jpg";
        }

        // 방법2. (addEventListener)
        img.addEventListener("mouseover", over);
        img.addEventListener("mouseout", out);

        function over() {
          img.src = "./images/new01_on.jpg";
        }
        function out() {
          img.src = "./images/new01_off.jpg";
        }

        // 방법3. (addEventListener 축약)
        img.addEventListener("mouseover", () => {
          img.setAttribute("src", "./images/new01_on.jpg");
        });
        img.addEventListener("mouseout", () => {
          img.setAttribute("src", "./images/new01_off.jpg");
        });

        // 방법4. (this)
        img.addEventListener("mouseover", function () {
          this.setAttribute("src", "./images/new01_on.jpg");
          // 여기서 화살표 함수를 쓰면 this가 화살표 함수를 받게 됨.
          // 화살표는 아무것도 가지고 있지않음. 결론은 실행안됨. 화살표 함수 쓰지말것.
        });
        img.addEventListener("mouseout", function () {
          this.setAttribute("src", "./images/new01_off.jpg");
        });
      });
    </script>
  </head>
  <body>
    <div class="img">
      <img src="./images/new01_off.jpg" alt="mouse over event" />
    </div>
  </body>
</html>

'Skills > JavaScript' 카테고리의 다른 글

221206 dom_11.html (태그 추가)  (0) 2022.12.06
221206 dom_10.html (탭 만들기)  (0) 2022.12.06
221205 dom_08.html (상세설명 버튼 토글)  (0) 2022.12.05
221205 dom_07.html (상세설명 보기 닫기)  (0) 2022.12.05
221205 dom_06.html  (0) 2022.12.05
'Skills/JavaScript' 카테고리의 다른 글
  • 221206 dom_11.html (태그 추가)
  • 221206 dom_10.html (탭 만들기)
  • 221205 dom_08.html (상세설명 버튼 토글)
  • 221205 dom_07.html (상세설명 보기 닫기)
개발자 윤구나
개발자 윤구나
개발 공부를 하고 있습니다. Let's go!
  • 개발자 윤구나
    이것은 무엇?????
    개발자 윤구나
    • 분류 전체보기
      • Skills
        • Java
        • Database
        • Flutter, Dart
        • JavaScript
        • React
        • HTML5
        • CSS3, SCSS
        • PHP
        • C#
        • Unity
        • Algorithm
        • GIT·GitHub
        • 그 외
      • Book Review
      • IT NEWS
      • 설계
      • 자기 계발
  • 블로그 메뉴

    • 홈
    • 방명록
  • 인기 글

  • 최근 글

  • 최근 댓글

  • 전체
    오늘
    어제
  • hELLO· Designed By정상우.v4.10.3
개발자 윤구나
221206 dom_09.html (mouseover)
상단으로

티스토리툴바