• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - change 이벤트 (= onchange 속성) ★ - 요소값변경이벤트 (= 체인지이벤트 = 온체인지) ※ 옵션값 선택시 바로 SUBMIT 전송.

8,812  
목차
  1. onchange 예제 - select 선택창에서 선택한 내용 보여주기
  2. onchange 정의
  3. onchange 지원 HTML 태그 종류
  4. onchange 예제 - 입력 내용을 대문자로 변환
  5. onchange 예제 - input 입력 내용 변경 감지 이벤트

 

onchange 예제 - select 선택창에서 선택한 내용 보여주기 

 

<select id="hz" onchange="homzzang()">

  <option value="">선택

  <option value="HTML">HTML

  <option value="CSS">CSS

  <option value="JS">JS

</select>

 

<p id="view"></p>

 

<script>

function homzzang() {

    var x = document.getElementById("hz").value;

    document.getElementById("view").innerHTML = x + "선택";

}

</script>

 

결과 보기

 

onchange 정의

 

요소값 변경 이벤트 발생.

 


 

1.
radio 버튼과 checkbox 경우, 체크 상태 변경 시 onchange 이벤트 발생.

2.

input 이벤트와 유사하나, 2가지 차이점 존재.

  • input 이벤트 - 요소값 변경 직후에 발생하며, <select> 요소에서는 작동 안 함.
  • change 이벤트 - 요소값 변경 후 요소가 포커스 잃으면 발생하며, <select> 요소에서도 작동함.


3.
모든 브라우저 지원

 

 

onchange 지원 HTML 태그 종류

 

  • <input type = "check">
  • <input type = "file">
  • <input type = "password">
  • <input type = "radio">,
  • <input type = "range">
  • <input type = " 검색 ">
  • <input type ="text ">
  • <select> ~ </select> 
  • <textarea> ~ </textarea>

 

 

onchange 예제 - 입력 내용을 대문자로 변환

[HTML 속성 방식]

 

아이디 입력: <input type="text" id="hz" onchange="homzzang()">


<script>

function homzzang() {

    var x = document.getElementById("hz");

    x.value = x.value.toUpperCase();

}

</script>

 

결과보기


[JS 속성 방식]

 

아이디 입력: <input type="text" id="hz">


<script>

document.getElementById("hz").onchange = function() {homzzang()};


function homzzang() {

    var x = document.getElementById("hz");

    x.value = x.value.toUpperCase();

}

</script>

 

결과보기


onchange 예제 - input 입력 내용 변경 감지 이벤트

 

<input type="text" name="hz" value="홈짱닷컴 Homzzang.com" onchange="hz(this.value)">


<script>

function hz(val) {

  alert("입력내용 변경됨 : " + val);

}

</script>

 

결과보기



찾아주셔서 감사합니다. Since 2012