[JS] onchange 이벤트 사용, value 가져오기

자바스크립트 onchange는 작성한 JS를 통해 변화가 일어났는지를 감지합니다. jQuery change 이벤트와 비슷합니다. onchange 이벤트의 사용 방법은 아래와 같습니다. 첫 번째는 html에서 사용할 때, 나머지는 js에서 사용할 때의 문법입니다. 

 

<element onchange="myScript">

object.onchange = function(){myScript};

object.addEventListener("change", myScript);

 

 

단 마지막의 addEventListner는 익스플로러 8 이전 버전에서는 작동하지 않는 메소드입니다. (출처) 아래는 간단한 JS onchange 이벤트의 예제입니다. 예제를 실행하고 input text의 내용(non)의 내용을 바꾸면 배경색이 노란색으로 바뀝니다.  

 

<input type="text" value="non" onchange = "hoisted(this)" />

 hoisted(obj);

 function hoisted(obj) {
   obj.style.backgroundColor = 'yellow';
 }

 

 
아래는 onChange 함수를 지원하는 브라우저입니다. 지원 브라우저는 크롬, 엣지, 파이어폭스, 익스플로러, 사파리, 오페라 등이 있습니다.

 

 

 

 

아래는 selectbox에서 onchange 함수를 사용하고 this.value를 사용해서 값을 가져오는 예시입니다.
다른 함수에서 ID 값으로 참조하여 선택되어져 있는 option의 value값을 가져올 수 있습니다.

 

<select id="seledtBox" onchange="alert(this.value)">
<option id="0" value="value1">value1</option>
<option id="1" value="value2">value2</option>
<option id="2" value="value3">value3</option>
<option id="3" value="value4">value4</option>
<option id="4" value="value5">value5</option>
</select> 

 

var selectValue = document.getElementById('selectBox').value;
alert(selectValue); 

<select id="seledtBox" onchange="alert(this.options[this.selectedIndex].text)">
<option id="0">value1</option>
<option id="1">value2</option>
<option id="2">value3</option>
<option id="3">value4</option>
<option id="4">value5</option>
</select> 

 

두 번째 자바스크립트 onchange를 사용한 경우에는 text (value1, value2, ...) 부분이 값으로 넘어갑니다. (출처)

 

 

 

onchange의 값이 갱신되지 않을 때 / 동작하지 않는 경우 해결하기

---

onchange가 select 태그 등에 동작하지 않는 원인은 select 태그를 클릭해서 값을 선택하지 않고,
select 태그의 value 프로퍼티의 값을 스크립트를 사용해 업데이트 하는 경우입니다.
onchange 이벤트는 해당 element의 blur 여부에 따라 동작하기 때문에 값이 갱신되지 않습니다.

onchange 동작 안됨 현상의 해결 방법은 해당 DOM에 onchange() 함수를 추가하여 사용하는 것입니다. 위와 같이 코드를 적용하면 updated()라는 함수가 뒤따라 실행하게 됩니다. (출처)

 

document.querySelector('select').value = '2';
// 엘리먼트를 찾아 값을 변경

document.querySelector('select').onchange();
// 값이 바뀐 엘리먼트에 onchange 함수를 실행

 

입력폼의 양식이 많은 경우 onchange()를 가지는 엘리먼트 요소가 하나가 아닌 여러개인 경우가 있을 것입니다. 이 경우 하나씩 적용하기 보다 onchange를 가지는 모든 엘리먼트를 가져와 동작시키는 방법이 더욱 편합니다.  모든 onchange 속성을 가지는 태그를 찾아 그 값을 eval() 함수를 사용하여 실행하는 방법으로 아래와 같습니다.

 

var elements = document.querySelectorAll('[onchange]');

for(var i = 0; i < elements.length; i++) {
  var thisFunc = elements[i].getAttribute('onchange');
  eval(thisFunc);
};