oninput onchange Event

---

 

1. oninput

우리는 input 태그와 textarea 태그의 데이터를 입력 할 때가 많이 있습니다.

이 태그들은 사용자로 데이터를 입력 받구 서버에 데이터를 전송 하는 경우가 많습니다.

그런데 사용자가 데이터를 입력 할 때마다 바로바로 데이터를 확인 하거나,

특정 이벤트를 주고 싶다면 oninput 이벤트를 사용 하시면 됩니다.

이런 이벤트를 우리는 주로 '리스너' 라고 합니다. 유효성 검사를 할때에도 많이 쓰입니다.

<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myInput").value;
  document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

id 가 myInput 인 input 태그의 어떤 입력이 들어오면 myFunction 함수를 실행 합니다.

그리고 id 가 demo 인 p 태그의 "You wrote: (입력값)" 을 넣어 줍니다.

oninput 이벤트와 굉장히 비슷한 onchange 이벤트가 있습니다.  

호환성은 다음과 같습니다.

Chrome - YES  IE - 9.0  Firefox - 4.0  Safari - 5.0  Opera - YES

 

 

2. onchange

onchange 이벤트는 oninput 이벤트와 비슷 합니다.

차이점은

1. onchange 이벤트는 input 태그의 초점(focus)를 잃은 순간에 작동 합니다.

그러니깐 input 태그의 데이터를 입력 하고 다른 곳을 클릭 하면 작동 하게 됩니다.

2. 그리고 oninput 은 input, textarea 태그에서만 사용 가능하지만,

onchange 는 input, textarea, select 태그에서만 사용 가능 합니다.

<input type="text" id="myInput" onchange="myFunction()">
<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myInput").value;
  document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

이 코드를 실행해 보면 input 태그의 데이터를 입력하고,

다른 곳을 클릭 하면 myFunction 함수가 동작 하는것을 확인 할 수 있습니다!

호환성은 다음과 같습니다.

Chrome - YES  IE - YES  Firefox - YES  Safari - YES  Opera - YES