<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;
});