HTMLElement: input event

input 이벤트는 <input>, <select> 및 <textarea> 요소의 value 속성이 바뀔 때마다 발생한다.

또한, 이 이벤트는 아무 요소의 contenteditable 속성 및 designMode 속성이 활성화 되어도 발생할 수 있다. 이런 경우, contenteditable 및 designMode, 속성이 활성화된 자식을 가진 편집 불가능한 최초 부모 요소에서 발생한다. 예를 들어 특정 요소에서 부모자식관계 중 자식 관계 여러개가 해당 속성이 활성화되어 내용 변경 시 이벤트가 발생해야 할 때, 해당 속성이 활성화되지 않은 최초의 부모 요소를 기준으로 발생하게 된다.

type=checkbox 및 type=radio, 속성을 가진 <input> 요소의 경우, HTML5 규격에 의하면, input 이벤트는 반드시 사용자가 작동시킬 때마다 발생된다. 하지만 애초부터 그렇게 설계되어 있지 않은 경우가 있으므로, 반드시 아래 호환성 문단을 참고하거나, 호환되지 않을 경우, change (en-US) 이벤트를 대신해서 사용하도록 한다.

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}