If the propertychange event is not supported, use this event or higher-end mutationobserver.
VaR root = document.doc umentelement supportdomattrmodified = root. addeventlistener? (Function () {var FN, F = false, id = root. ID; fn = function () {root. removeeventlistener ('domattrmodified', FN, false); supportdomattrmodified = true; root. id = ID; // restore it}; root. addeventlistener ('domattrmodified', FN, false); root. id = 'mass'; // update attribute F = root. ID! = 'Mass'; root. ID = ID; // restore it anyway. Return F ;}) (): false
If (mutationobserver) {// ff14 + (mutationobserver, no prefix required), chrome18 + (WebKit prefix required), currently only these two browsers are implemented. /* Reference: 1. http://www.w3.org/TR/dom/#mutation-observers 2. https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ */Observer = new mutationobserver (function (mutations) {// mutations [mutations. length]. oldvalue // old value onchange () ;}); Observer. observe (EL, {// attributeoldvalue: True, // The previous value of the mutation record. attributes: True, attributefilter: 'value' // only focus on value changes .}); // observer. disconnect ();} else if (El. addeventlistener &&! Window. xdomainrequest) {// ff2 +, opera9.2 +, ie9 + el. addeventlistener ('domattrmodified', function (e) {/* Note that this item is only sensitive to JS modifications. therefore, you need to combine other DOM events that focus on attributes, such as oninput and onchange of input. */Alert (E. attrname) if (E. attrname = 'value') {onchange () ;}, false);} else if (El. attachevent) {el. attachevent ('onpropertychange', function (e) {If (E. propertyname = 'value') {onchange () ;}}) ;}document. onclick = function () {el. value = math. random (); // el. setattribute ('value', math. random (); El. name = 123; // opera10 +, ff2 +, ie9 + (interestingly, domattrmodified E. in attrname and ie9, the name is actually called propdescname ..) el. setattribute ('name', 1234); // opera9.2 +, ff2 +, ie9 +/* we recommend that you use el only. modify the value of a value using the value method. in this way, although opera9.6 -. but it can solve a fatal problem. that is, if you do not use ie9 somewhere, you have used el. value = xxx after El. setattribute ('value', XXX); becomes invalid... that is, domattrmodified and observer Callbacks are not triggered without changing the value. ie9 is abnormal, El. the value = xxx method can only trigger onpropertychange, And the setattribute method can only trigger domattrmodified. (The IE6-8 does not have this problem because the IE6-8 does not distinguish attribute from property. therefore, whatever it is, it triggers onpropertychange. Therefore, ie9 + also uses onpropertychange and ensures that the value is modified. El is used. value = xxx method. */
Browser |
Domsubtreemodified |
Domattrmodified |
Firefox 3.6.2 |
OK |
OK |
Internet Explorer 8 |
No practice, but you have your own practice. |
Safari 4.0.5 |
X |
X |
Opera 10.51 |
X |
OK |
Chrome 4.1.249.1042 |
X |
X |
Related links:
BOM and DOM events 02-attribute changes