IE "onpropertychange" 이벤트 -> FireFox 에서는?

출처 : http://vervain.tistory.com/tag/onpropertychange


FireFox 에는 onpropertychange event가 없다.
IE에서 DOM element의 값 변경사항 등을 감시하는데, 다음과 같이 쓰인다.

IE 기준:

view plaincopy to clipboardprint?

1. var ROFL = function() {   
2.     if (event.propertyName == "value") {   
3.         alert("I got ya!");   
4.     }   
5. }   
6.   
7. var inputElement = document.getElementById("input");    
8. inputElement.onpropertychange = ROFL;   
9. inputElement.value = "snooping..";  

var ROFL = function() {
	if (event.propertyName == "value") {
		alert("I got ya!");
	}
}

var inputElement = document.getElementById("input"); 
inputElement.onpropertychange = ROFL;
inputElement.value = "snooping..";

하지만, FF에는 onpropertychange 이벤트가 없다. 한참 고민을 하던 중에 예전에 Netscape에는 변수의 변화를 감시할 수 있는, watch, unwatch 가 있었다. 이 놈들이 DOM element 에도 적용이 되는지 테스트해보았다.

view plaincopy to clipboardprint?

1. var header = document.getElementById("header");   
2. header.watch("id", function(id, xn, xp) {   
3.     alert(id + "," + xn + "," + xp);   
4. });   
5. header.id = ":)";   
6. header.unwatch("id");   
7.   
8. header.style.watch("width", ....);   
9. header.style.width = "100px";   
10. header.style.unwatch("width");  

var header = document.getElementById("header");
header.watch("id", function(id, xn, xp) {
    alert(id + "," + xn + "," + xp);
});
header.id = ":)";
header.unwatch("id");

header.style.watch("width", ....);
header.style.width = "100px";
header.style.unwatch("width");

된다. :)
그러나, 확인되야 될 사항이 있다.

1. closures 사용에 따른 메모리 유출.
2. 감시되고 있는 객체가 삭제될 경우.
3. unwatch 를 사용하지 않을 경우 메모리 유출.