html 태그의 onchange 이벤트

html 태그중에 onChange 이벤트가 있다.

input, selectbox 등의 데이터가 변경되었을때 호출되는 이벤트 이다.

selectbox등과 같은 선택형에서는 별 문제가 없다.

selectbox 같은 경우는 선택을 바꿨을 경우에 자동으로 포커싱이 바뀌기 때문이다.

하지만, input과 같은 text형식에는 함정이 숨어있다.

text형식에서는 안에 있는 내용만 바뀌었을때는 호출되지 않는다.

안에 있는 내용이 바뀌고 난후, 포커싱을 잃었을 때 이벤트 호출된다.

실재로 

가장 간단하게 예를 들어본다면,

<script type="text/javascript">

$(function() {

    $('input').change(function(e) {

        alert($(this).val());

    });

});

</script>

<input type="text" value="" >

위와 같이 원초적인 예에서 input 에 아무리 값을 변경해보아도 절대 change 이벤트는 발생하지 않는다.

값이 바뀌고 포커싱을 잃을때(tab 키를 누루든기, 마우스 포인트를 다른곳에 찍는다든) 값이 호출되는 걸 볼 수 있다.