개체의 속성을 변경하면 그 개체에 발생된다.


이벤트 속성
object.onpropertychange=handler JScript 만-
object.onpropertychange=GetRef('handler') VBScript 5.0-
인라인 HTML <ELEMENT onpropertychange="handler"> 모든 플랫트폼
명명된 스크립트 <SCRIPT for=object event=onpropertychange> Explorer-
이벤트 특성
Bubbles 없음
취소 불가
발생 원인 속성값을 변경시켰을 때.
디폴트 작용 속성 변경의 신호를 보낸다.
HTML 규격 비규격 IE 확장.

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

altKey ALT 키가 눌렸는가를 반환하거나 설정한다.
altLeft 왼쪽 ALT 키가 눌렸는가를 반환하거나 설정한다.
ctrlLeft 왼쪽 CTRL 키가 눌렸는가를 반환하거나 설정한다.
propertyName 개체의 변경된 속성 이름을 반환하거나 설정한다.
shiftLeft 왼쪽 SHIFT 키가 눌렸는가를 반환하거나 설정한다.
srcElement 이벤트를 발생시킨 개체를 반환하거나 설정한다.
type 이벤트 개체의 이벤트 명칭을 반환하거나 설정한다.

특기

expando, style, 하위 개체등의 변경등, 개체의 속성을 변경하면 이 onpropertychange 이벤트가 발생된다.

변경된 속성값을 반환받기 위해 event 개체의 propertyName 속성을 사용한다.
이 속성은 변경된 개체의 속성 이름을 나타내는 읽기 전용의 문자열을 반환한다.

스타일쉬트의 속성인 경우에는 style.propertyName을 사용한다. 예를 들어 CSS 속성 pixelLeft가 변경되었으면 window.event.propertyName으로 style.left 속성 이름을 얻는다.
CSS 속성이 아닌 속성, 예를 들어 name이 변경되었으면, window.event.propertyName의 반환값은 name이다.

onpropertychange 이벤트가 발생되면, event 개체의 srcElement 속성은 속성이 변경된 개체가 된다.

주기 : 자식 엘레멘트의 innerTextinnerHTML 속성값의 변경은 모체 엘레멘트의 onpropertychange 이벤트에 영향을 받지 않는다.

적용
개체scriptHTMLIE


onpropertychange 이벤트 예제


스타일 변경 예제
결과 표시창

속성값 변경을 위해 개체를 클릭해 보라.

<SCRIPT>
astr='';
function changeProp(){
  obj.innerText=inText.value;
}
function changeCss(){
  if (selObj.selectedIndex==0) selBut.style.color='white';
  else selBut.style.color='black';
  selBut.style.backgroundColor=selObj.value;
}
function doTry(){
  astr+=event.srcElement.tagName+', '+event.srcElement.id+', '+event.type+' 이벤트 발생, ';
  astr+=' propertyName='+event.propertyName+'<BR> ';
  show.innerHTML=astr;
}
</SCRIPT>
<BUTTON id="obj" onpropertychange="doTry()">수정 목표 개체</BUTTON>
<INPUT id="inText" type="text" style="width:150;" value="변경할 문자열"  onpropertychange="doTry()"></INPUT>⇒
<INPUT id="textBut" type="button" value="속성 변경" onclick="changeProp()"><BR>
스타일 변경 예제 <SELECT id="selObj" style="width:150" onpropertychange="doTry()">
<OPTION value="black" style="color:black">Black</OPTION>
<OPTION value="green" style="color:green">Green</OPTION>
<OPTION value="blue" style="color:blue">Blue</OPTION>
<OPTION value="red" style="color:red">Red</OPTION>
</SELECT>
⇒ <INPUT id="selBut" type="button" value="속성 변경" onclick="changeCss()" onpropertychange="doTry()">
<SPAN style=width:3em></SPAN>
<BUTTON onclick="astr=show.innerHTML=''">지우고 다시</BUTTON>
<DIV id="show" style="border:solid 1 blue;width:650;padding:5">결과 표시창</DIV>