[vanillaJS] input range 상태관리하기

<input type="range">


위와 같은 input 태그에서 계속해서 변하는 값을 알아내고자 한다.

---

const input = document.querySelectorAll("input");

input.addEventListener("change", (e) => console.log(e.target.value))
input.addEventListener("mousemove", (e) => console.log(e.target.value));

자바스크립트30 3번째 과제에서는 위 처럼 간단히 코드를 구현했다. 하지만 이렇게 하면 클릭 중이 아닐때에도 mousemove 이벤트가 동작한다.

그건 좀 별로인것같아... 클릭 중일 때만 mousemove 이벤트가 동작하도록 해보자.

---

const input = document.querySelectorAll("input");
// 1. 클릭 중인지 아닌지를 나타내는 상태변수 `isClicked` 를 추가한다.
let isClicked = false;
// 2. 마우스를 계속 누르고 있으면 상태를 바꾼다.
input.addEventListener("mousedown", (e) => {
      isClicked = true;
	});
// 3. `isClicked == true` 일 때만 `mousemove` 이벤트가 시작한다.
input.addEventListener("mousemove", (e) => {
      if (isClicked) {
        console.log(e.target.value);
      }
    });

input.addEventListener("change", (e) => {
      console.log(e.target.value);
    });

// 4. 마우스에서 손을 땠을 때의 이벤트 `mouseup` 을 추가한다.
window.addEventListener("mouseup", () => {
      isClicked = false;
    });