Skills/JavaScript

221206 dom_09.html (mouseover)

개발자 윤구나 2022. 12. 6. 09:56 
<!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>