자바스크립트 change 와 input 이벤트

🔍 change 이벤트

change 이벤트는 기본적으로 요소의 변경이 끝나고 난후 포커스를 잃을때 발생한다.

<select onchange="alert(this.value)">
  <option value="">선택하세요.</option>
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>

위의 코드는 select 태그 안에 값의 변경이 끝나면 저 option의 value 들을 alert 창으로 띄어주는 것이다.

2를 선택했을때 2라는 값을 띄운 alert 창이 띄어진다.

🔍 input 이벤트

input 이벤트는 사용자가 값을 변경시킬때마다 발생하는 이벤트이다.

 <input type="text" id="input"> oninput: <span id="result"></span>
    <script>
      input.oninput = function() {
        result.innerHTML = input.value;
      };
    </script>

위의 코드는 input 창 안에서 값을 입력함과 동시에 span 창 안에도 input 값이 띄어지도록 하는 것이다.