mousemove Event _ target

mincode_·2021년 3월 19일
1

ToyProject_ JavaScript

목록 보기
1/4

자바스크립트를 이용해서 마우스를 따라 타켓점이 움직이는 에니메이션을 만들어 보자 🌈

CODE

<body class="body">
    <div class="target">
      <img src="img/target.png" alt="target"/>
      <div class="txt"></div>
    </div>
  </body>
 const target = document.querySelector(".target");
 const txt = document.querySelector(".txt");
 target.style.position = "absolute";
 target.style.top = "0";
 target.style.left = "0";

 window.addEventListener("mousemove", (e) => {
   x = e.clientX;
   y = e.clientY;
   target.style.left = `${x}px`;
   target.style.top = `${y}px`;
   txt.innerHTML = `${target.style.left} <br>${target.style.top}`;
 });

Refactoring

<body>
    <div class="line horizontal"></div>
    <div class="line vertical"></div>
    <img class="target" src="img/target.png" alt="target" />
    <span class="tag"></span>
  </body>
const vertical = document.querySelector(".vertical");
const horizontal = document.querySelector(".horizontal");
const target = document.querySelector(".target");
const tag = document.querySelector(".tag");

document.addEventListener("mousemove", (e) => {
  x = e.clientX;
  y = e.clientY;

  vertical.style.left = `${x}px`;
  horizontal.style.top = `${y}px`;
  target.style.left = `${x}px`;
  target.style.top = `${y}px`;
  tag.style.left = `${x}px`;
  tag.style.top = `${y}px`;
  tag.innerHTML = `${x}px, ${y}px`;
});

사실 쉽겠지 라는 생각으로 접근했는데, 생각보다 코드가 뒤죽박죽이 되는것을 보고 반성했다..
위의 코드는 수정후 코드이다.
리액트가 아닌 순수 자바스크립트만 해보려니 다시 새롭게 느껴진다.
querySelector 로 DOM 에 접근해 요소를 가지고 오는것,
addEventListener 로 이벤트 생성하는것 까지 꽤나 낯설게 느껴졌다.
하지만, 결국 JavaScript 가 기반이기 때문에 열심히 만들어 봐야 겠다.

profile
그림그리는 프론트앤드 개발자 입니다

0개의 댓글