DOM世界的观察者propertychange.docVIP

DOM世界的观察者: propertychange 浏览器自带的观察者实在太多了。经典的不用说，就是onclick, attachEvent, addEventListner，可惜它们只是监听用户的行为。不过这当中有个特例是propertychange，当元素的属性，不管是自定义还是原生，只要发生改变，就会触发回调。我们还可以通过它的事件对象的propertyName知道那个元素发生改变。标准浏览器有个弱化版oninput,只能检测value值！ FF则有个__noSuchMethod__，只通在用户调用方法时纠错用。后来，又搞出个逆天的Ototype.watch，由于元素节点在FF中也是Object的实例，其威力可想而已。但也有美中不足，我们不知道究竟是哪一个属性发生变化。 但这一状况随着浏览器对setter,getter的强力介入得到改善。早在Firefox 2.0+, Safari 3.0+, Chrome 1.0+ 与 Opera 9.5+，他们就口径一致地添加以下方法，支持这种新语法： var lost = { loc : Island, get location () { //这里可以添加回调 return this.loc; }, set location(val) { //这里也可以搞小动作 this.loc = val; } }; lost.location = Another island; 但这种新语法在IE8以下是会报致命错误，连try catch也挡不住，因此对这种兼容性极差的东西，程序员们不埋单，于是浏览器商又推销另一种新产品： Object.defineProperty(document.body, description, { get : function () { return this.desc; }, set : function (val) { this.desc = val; } }); document.body.description = Content container; 著名的例子是在FF模拟outerHTML，不过这东西最终在FF11上实现了。 ///questions/1700870/how-do-i-do-outerhtml-in-firefox if (typeof (HTMLElement) != undefined !window.opera) { HTMLEtotype._____defineGetter_____(outerHTML, function() { var a = this.attributes, str = + this.tagName, i = 0; for (; i a.length; i++) if (a[i].specified) str += + a[i].name + = + a[i].value + ; if (!this.canHaveChildren) return str + /; return str + + this.innerHTML + / ? + this.tagName; }); HTMLEtotype._____defineSetter_____(outerHTML, function(s) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var df = r.createContextualFragment(s); this.parentNode.replaceChild(df, this); return s; }); HTMLEtotype._____defineGetter_____(canHaveChildren, function() { return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase()); }); } IE自有自己一套算盘，它使用Object.DefineProperty数据描述符实现 setter与getter。不过这东西在IE8有BUG，只能用于元素节点 //bug的详解见这里/_franky/archive/2011/04/27/2030766.html Object.defineProperty(document.body, description, { get : function () { return thi