[책] 자바스크립트 코드 레시피 278 - 155일차

슬라이더 값 변경 확인하기

• 슬라이더 상태 변경 시 작업을 처리하고 싶을 때

구문

input input 요소 변경 시 이벤트
change input 요소 변경 시 이벤트

설명

폼 요소 값의 변경은 input, change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. input 이벤트는 슬라이더가 움직일 때마다 발생하지만, change 이벤트는 조작이 끝난 상태에서만 발생합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 슬라이더 값 읽어 오기 방법을 사용합니다.

실습

index.html

<input type="range" id="myRange" min="0" max="100" value="50">
<p class="log"></p>

---

script.js

const element = document.querySelector('#myRange');
element.addEventListener('input', handleChange);
function handleChange(event) {
  const value = event.target.value;
  document.querySelector('.log').innerHTML = `현재 값은 ${value} 입니다.`;
}