'마우스 클릭 시 함수 호출' 태그의 글 목록

마우스 클릭 시 함수 호출

[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 ) 2024.03.25

[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 )

전영호 2024. 3. 25. 16:55

2024. 3. 25. 16:55

Event

모든 행위를 이벤트라 부른다

마우스 이벤트

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const clickEvent = () => {
        alert("클릭");
      };
    </script>

    <input type="button" onclick="clickEvent()" value="클릭" />
    <input type="button" ondblclick="clickEvent()" value="클릭" />
    <input type="button" onmouseover="clickEvent()" value="클릭" />
  </body>
</html>

코드 실행

키보드 이벤트

아이디와 연동하여 이벤트 발생 시 함수 호출하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #h3 {
        color: red;
      }
    </style>
  </head>
  <body>
    <script>
      const clickEvent = () => {
        // alert("클릭");
        const name = document.getElementById("name");
        console.log(name);
        // name.value = "안녕하세요";
        // name.style = "background : blue; border : 10px solid black";

        const name1 = document.querySelector("#name2");
        console.log(name1);
        name1.value = name.value;
        name.value = "";
      };

      // window.onload => 웹이 호출될때 자동으로 실행되는 함수
      window.onload = () => {
        // alert("onload");
        document.getElementsByClassName("btn");
        const btn = document.querySelector(".btn");
        console.log(btn);
        btn.addEventListener("dblclick", innerTest);
        // 버튼이 더블클릭되면 innerTest 함수를 실행시켜라
      };

      const innerTest = () => {
        // 아이디 값이 text 인 것을 불러옴
        const txt = document.getElementById("text");
        let msg = "<h3 id = 'h3'>내용 바꾸기</h3>";
        txt.innerHTML = msg;
        // innerHTML 은 html 코드까지 적용된다
        txt.innerText = msg;
        // innerText 는 html 코드를 모두 text 로 인식하여
        // 코드를 모두 텍스트로 표현한다
      };
    </script>

    <input type="text" id="name" placeholder="input name" /><br />
    <input type="text" id="name2" placeholder="input name" /><br />
    <input type="button" onclick="clickEvent()" value="클릭" />
    <input type="button" class="btn" value="클릭" />
    <br />
    <label id="text">텍스트 값</label>
  </body>
</html>

코드 실행

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      const myMousedown = () => {
        document.getElementById("span").innerHTML = "마우스 DOWN";
      };

      const myMouseup = () => {
        document.getElementById("span").innerHTML = "마우스 UP";
      };

      let cnt = 0;
      const myMousemove = () => {
        cnt++;
        document.getElementById("count1").innerHTML = cnt;
      };

      const myMouseover = () => {
        document.getElementById("count2").innerHTML = cnt;
      };

      const myMouseout = () => {
        document.getElementById("count2").innerHTML = "마우스 나감";
      };
    </script>
  </head>
  <body>
    <div
      style="cursor: pointer"
      onmousedown="myMousedown()"
      onmouseup="myMouseup()"
    >
      <span id="span"> 이벤트 알아보기 </span>
    </div>

    <div
      onmousemove="myMousemove()"
      style="background: gray; width: 100px; height: 100px"
    >
      <span id="count1">0</span>
    </div>

    <div
      onmouseover="myMouseover()"
      onmouseout="myMouseout()"
      style="background: gray; width: 100px; height: 100px"
    >
      <span id="count2">0</span>
    </div>
  </body>
</html>

코드 실행

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 100px;
        height: 200px;
      }
    </style>

    <script>
      // window.onload 에서 window. 은 생략 가능
      onload = () => {
        // alert("execute");
        let img = document.getElementById("myImg");
        img.addEventListener("mouseover", changeFunc01);
        // 마우스가 들어오면 changeFunc01 함수를 호출
        img.addEventListener("mouseout", () => {
          let myImg = document.getElementById("myImg");
          let myImg02 = document.getElementById("myImg02");
          myImg.src = "download.jpg";
          myImg02.src = "download.jpg";
        });
        // 마우스가 들어오면 바로 뒤에 선언된 함수를 호출
      };
      changeFunc01 = () => {
        let myImg = document.getElementById("myImg");
        let myImg02 = document.getElementById("myImg02");
        myImg.src = "image.png";
        myImg02.src = "image.png";
      };
      changeFunc02 = () => {
        let myImg = document.getElementById("myImg");
        let myImg02 = document.getElementById("myImg02");
        myImg.src = "download.jpg";
        myImg02.src = "download.jpg";
      };
    </script>
  </head>
  <body>
    <img id="myImg" src="download.jpg" />
    <img
      id="myImg02"
      src="download.jpg"
      onmousedown="changeFunc01()"
      onmouseup="changeFunc02()"
    /><br />
  </body>
</html>

download.jpg : 이상해씨

image.png : 파이리

좌측 이미지 : 마우스가 올라가고 나감에 따라 그림이 변경, 우측 이미지 : 마우스가 그림에서 클릭됨에 따라 그림이 변경

코드 간단히 변경

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 100px;
        height: 200px;
      }
    </style>

    <script>
      // window.onload 에서 window. 은 생략 가능
      onload = () => {
        // alert("execute");
        let img = document.getElementById("myImg");
        img.addEventListener("mouseover", changeFunc01);
        // 마우스가 들어오면 changeFunc01 함수를 호출
        img.addEventListener("mouseout", changeFunc01);
        // 마우스가 들어오면 바로 뒤에 선언된 함수를 호출
      };
      let num = 0;
      changeFunc01 = () => {
        const arr = ["image.png", "download.jpg"];
        let myImg = document.getElementById("myImg");
        let myImg02 = document.getElementById("myImg02");
        myImg.src = arr[num];
        myImg02.src = arr[num];
        num = (num == 0) ? 1 : 0;

        // if (num == 0) {
        //   myImg.src = arr[num];
        //   myImg02.src = arr[num];
        //   num = 1;
        // } else {
        //   myImg.src = arr[num];
        //   myImg02.src = arr[num];
        //   num = 0;
        // }

        //myImg.src = "image.png";
        //myImg02.src = "image.png";
      };
    </script>
  </head>
  <body>
    <img id="myImg" src="download.jpg" />
    <img
      id="myImg02"
      src="download.jpg"
      onmousedown="changeFunc01()"
      onmouseup="changeFunc02()"
    /><br />
  </body>
</html>

코드 실행

실습 예제

예제 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: lightgray;
        height: 400px;
        width: 400px;
        text-align: center;
      }
      div > img {
        height: 300px;
        margin-top: 5%;
      }
      div > div {
        width: auto;
        height: 50px;
        display: flex;
        background: lightpink;
      }
      div > div > button {
        height: 25px;
        margin: auto;
      }
    </style>
    <script>
      imageNum = 1;
      onload = () => {
        let nextImgbtn = document.getElementById("nextImgbtn");
        let beforeImgbtn = document.getElementById("beforeImgbtn");
        nextImgbtn.addEventListener("click", nextImgFunc);
        beforeImgbtn.addEventListener("click", beforeImgFunc);
      };
      nextImgFunc = () => {
        let img = document.getElementById("img");
        imageNum == 8 ? (imageNum = 1) : imageNum++;
        img.src = `./사진/최근상품0${imageNum}.jpg`;
      };
      beforeImgFunc = () => {
        let img = document.getElementById("img");
        imageNum == 1 ? (imageNum = 8) : imageNum--;
        img.src = `./사진/최근상품0${imageNum}.jpg`;
      };
    </script>
  </head>
  <body>
    <div>
      <img src="./사진/최근상품01.jpg" id="img" />
      <div>
        <button id="beforeImgbtn">이전 사진</button>
        <button id="nextImgbtn">다음 사진</button>
      </div>
    </div>
  </body>
</html>

코드 실행

실습 예제2

예제 풀이2

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      img {
        width: 100px;
        height: 100px;
      }
      .flex {
        display: flex;
      }
      .div {
        border: 1px solid gray;
        width: 100px;
        height: 100px;
        position: relative; /* 자식 span요소를 absolute를 사용하기 위해 설정*/
      }
      span {
        /*absolute가 적용되면 inline태그의 사이즈도 조정 가능해 진다*/
        position: absolute;
        background: orange;
        top: 25px;
        left: 25px;
        width: 50px;
        height: 50px;
        /*line-height와 height의 크기를 같게 하면 글씨가 가운데 정렬된다*/
        text-align: center;
        line-height: 50px;
      }
    </style>

    <script>
      const images = [
        "./사진/최근상품01.jpg",
        "./사진/최근상품02.jpg",
        "./사진/최근상품03.jpg",
        "./사진/최근상품04.jpg",
        "./사진/최근상품05.jpg",
        "./사진/최근상품06.jpg",
        "./사진/최근상품07.jpg",
        "./사진/최근상품08.jpg",
      ];

      window.onload = function init() {
        console.log("init");
        let msg = "<div class='flex'>";
        for (let i = 0; i < images.length; i++) {
          msg += `<div class="div" id="${i}" onMousemove="imgOver(${i})" onMouseout="imgOut(${i})">`;
          msg += `<img src="${images[i]}" >`;
          msg += "</div>";
          if (i + 1 == Number(images.length / 2))
            msg += "</div><div class='flex'>";
        }
        const wrap = document.getElementById("wrap");
        wrap.innerHTML = msg;
      };
      const imgOver = (index) => {
        const div = document.getElementById(index);
        div.innerHTML = `<span onMousemove="imgOver(${index})">선택</span>`;
      };
      const imgOut = (index) => {
        const div = document.getElementById(index);
        div.innerHTML = `<img src="${images[index]}">`;
      };
    </script>
  </head>
  <body>
    <div id="wrap"></div>
  </body>
</html>

- 처음 시도(오류) -

테이블 안에 td 태그내부에 img 태그로 이미지를 불러옴 > 이후 img 태그에 각각 id 를 부여하여 innerHTML 을 사용하여 이미지를 display:none 으로 표현하고자 하였으나 실패 > innerHTML 은 해당 태그 안의 HTML 코드 자체를 변경하는 기능이므로 변경하고자 하면 img 태그에 id 를 부여해서 변경하는 것이 아닌 img 태그를 가지고 있는 부모 태그인 td 에 id 를 부여하여 변경하여야 했음.... > 태그 내에 있는 코드 자체를 변경하는 것이 innerHTML 이므로 만약 img 를 변경하고 싶다면 혹은 제거하고 싶다면 img 가 속해있는 부모 태그에서 사용해야 한다

코드 실행

728x90

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

[JavaScript] setTimeout, setInterval, 자식요소 (추가, 삭제) (0)	2024.03.26
[JavaScript] 배열 (0)	2024.03.26
[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 ) (0)	2024.03.25
[JavaScript] 조건문, 반복문 (1)	2024.03.22
[JavaScript] 변수 선언, 형 변환, 연산자, 출력 (0)	2024.03.22

PREV 이전 1 NEXT 다음

전영호의 개발 블로그