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

텍스트 박스 값 변경 확인하기

• 텍스트 입력 폼의 변경을 감시하고 싶을 때

구문

change input 요소 변경 시 이벤트
input input 요소 키 입력 시 이벤트

설명

텍스트 입력 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능합니다. addEventListener() 를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 박스 값 읽어 오기 방법을 사용합니다. input 이벤트는 키 입력 발생과 함께 발생하지만 change 이벤트는 Enter 키 혹은 포커스가 벗어났을 때 발생합니다.

실습

index.html

<input id="myText" type="text">
<p class="log"></p>

---

script.js

const element = document.querySelector('#myText');
element.addEventListener('input', handleChange);
function handleChange(event) {
  const value = event.target.value;
  document.querySelector('.log').innerHTML = value;
}