개체의 내용을 선택하거나 선택된 내용이 변경되었을 때 발생한다.


이벤트 속성
object.onchange=handler JScript 만-
object.onchange=GetRef('handler') VBScript 5.0-
인라인 HTML <ELEMENT onchange ="handler"> 모든 플랫트폼
명명된 스크립트 <SCRIPT for= object event=onchange> Explorer-
용법

이벤트가 발생하면 'JavascriptCode'를 실행한다.

Javascript 에서는
imgObj.onchange='JavascriptCode'
HTML 에서는
<ELEMENT onChange="JavascriptCode">
이벤트 특성
Bubbles 없음
취소 가능
발생 원인

onchange 이벤트 핸들러는 입력 필드에서 내용이 바뀐 것을 감지하여 onchange 이벤트를 발생시킨다.

  • 마우스나 키보드 항해로 select 개체에서 다른 Option를 선택하였을 때.
  • 텍스트 필드의 내용을 변경하고 개체 밖으로 항해 했을 때.
디폴트 작용 내용 변경이 확정된다.
HTML 규격 HTML 4.0 규격

DHTML 개체 모델에서 이벤트처리자는 파라메터들을 직접 받지는 못해도, event개체의 쿼리를 사용할 수 있다.

altKey ALT 키가 눌렸는가를 반환하거나 설정한다.
altLeft 왼쪽 ALT 키가 눌렸는가를 반환하거나 설정한다.
clientX 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수평 좌표를 반환하거나 설정한다.
clientY 윈도우 장식과 스크롤바를 제외한 사용자 지역에 상대적 마우스포인터 수직 좌표를 반환하거나 설정한다.
ctrlLeft 왼쪽 CTRL 키가 눌렸는가를 반환하거나 설정한다.
offsetX 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수평 좌표를 반환하거나 설정한다.
offsetY 이벤트가 발생된 개체에 마우스포인터의 상대적인 위치(오프세트) 수직 좌표를 반환하거나 설정한다.
returnValue 이벤트로 부터의 반환값을 반환하거나 설정한다.
screenX 사용자 스크린에 상대적인 마우스포인터의 수평 위치를 반환하거나 설정한다.
screenY 사용자 스크린에 상대적인 마우스포인터의 수직 위치를 반환하거나 설정한다.
shiftLeft 왼쪽 SHIFT 키가 눌렸는가를 반환하거나 설정한다.
srcElement 이벤트를 발생시킨 개체를 반환하거나 설정한다.
type 이벤트 개체의 이벤트 명칭을 반환하거나 설정한다.
x 상대적으로 위치한 모체 개체에 상대적인 위치 수평 좌표를 반환하거나 설정한다.
y 상대적으로 위치한 모체 개체에 상대적인 위치 수직 좌표를 반환하거나 설정한다.
특기

해당 입력필드가 초점을 받기 시작해서 부터 다시 초점(focus)을 잃을 때까지 사이에 입력폼의 필드 내용이 변경되었을 때 onchange 이벤트가 발생된다. 변경되는 도중에는 발생하지 않는다.

초점이 계속 그 입력 필드에 있으면 계속 입력하고 있는 중으로 간주하여 onchange 이벤트가 발생되지 않는다.

변경을 확정하기 위해서는 해당 개체 밖으로 초점을 이동시키던가, onblur 메서드를 사용하여 초점을 제거시켜야 한다.

select 개체에서 프로그램적으로 선택을 변경하면 이 onchange 이벤트는 발생되지 않는다.

적용
개체scriptHTMLIE


onchange 이벤트 예제

선택을 바꿔보라.

select 개체의 선택을 바꾸면 onchange 이벤트가 발생된다.

<FORM name=fname>
<P>선택을 바꿔보라.
<SELECT name=selObj
  onchange="alert('index(' + this.selectedIndex + ')\nvalue=' + this.options[this.selectedIndex].value)">
<OPTION value="사과">사과
<OPTION value="감귤">감귤
<OPTION value="포도">포도
<OPTION value="복숭아">복숭아
</SELECT>
</FORM>

input를 이용하여 내용의 변경(onchange)을 직접 표시하는 예제

입력칸에서 문자를 변경시켜 보라



내용을 수정하고 내용 변경이 완료되었다는 신호를 주어야 onchange 이벤트가 발생된다.
다시 말해서 포커스가 다른 입력 창으로 이동하거나, 필드 밖으로 이동하는 등 포커스가 다른데로 이동하여야 한다.

<FORM name="f3">입력칸에서 문자를 변경시켜 보라<BR>
<INPUT type="text" onChange="alert(this.value)" value=""><BR>
<INPUT type="text" onChange="alert(this.value)" value="KoXo Javascript"><BR>
<INPUT type="text" onChange="alert(this.value)" value="안녕하세요"><BR>
</FORM>