est-il une alternative à DOMAttrModified qui va travailler dans webkit

J'ai besoin de tirer parti de ce DOM événement. IE a onpropertychange, à ce que j'en ai besoin pour le faire aussi. Webkit ne semble pas soutenir cet événement, cependant. Est-il une autre solution que je pourrais utiliser?

InformationsquelleAutor blockhead | 2009-12-10
  1. 24

    Bien que Chrome ne permet pas de distribuer DOMAttrModified événements, les plus lightweighted mutation observateurs sont pris en charge depuis 2011, et ces travaux pour des modifications d'attributs, trop.

    Voici un exemple pour le corps du document:

    var element = document.body, bubbles = false;

var observer = new WebKitMutationObserver(function (mutations) {
  mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });

function attrModified(mutation) {
  var name = mutation.attributeName,
    newValue = mutation.target.getAttribute(name),
    oldValue = mutation.oldValue;

  console.log(name, newValue, oldValue);
}

    Pour une simple modification de l'attribut, le console.log déclaration d'impression:

    <body color="black">
<script type="text/html">
document.body.setAttribute("color", "red");
</script>
</body>

    Console:

    > color red black

    • Il semble que cela va actuellement pas de travail en combinaison avec le CSS3 "redimensionner: à la fois" de la propriété. L'observateur ne sera pas ramasser les modifications apportées à l'élément par l'utilisateur en faisant glisser la poignée de redimensionnement.
    • Est-il possible que je peux voir où le changement provient de? J'ai un élément dont la classe est en train d'être changé quelque part à travers le JS, et j'essaie de comprendre d'où, mais Chrome est la trace de la pile de l'événement n'a pas montrer le code que l'origine de l'événement.
    • il est intéressant de noter que DOMAttrModified déclenche immédiatement lorsque l'attribut change, mais la mutation des observateurs de la file d'attente d'un événement. Donc, il y a une différence subtile entre les deux.
    • Je crois que le Webkit préfixe n'est plus nécessaire. caniuse.com/#search=MutationObserver
    InformationsquelleAutor daluege
  2. 13

    Si vous êtes heureux avec seulement la détection des appels à setAttribute() (par opposition à la surveillance de toutes les modifications d'attributs) puis vous pouvez contourner cette méthode sur tous les éléments avec: 

    Element.prototype._setAttribute = Element.prototype.setAttribute
Element.prototype.setAttribute = function(name, val) { 
 var e = document.createEvent("MutationEvents"); 
 var prev = this.getAttribute(name); 
 this._setAttribute(name, val);
 e.initMutationEvent("DOMAttrModified", true, true, null, prev, val, name, 2);
 this.dispatchEvent(e);
}
    InformationsquelleAutor Sean Hogan
  3. 3

    J'ai eu la même question, et a été la pensée de la modification de setAttribute, voir les ce que Sean n', j'ai copié qui. A très bien fonctionné, sauf que c'était de tir lorsqu'un attribut a été à plusieurs reprises la même valeur, alors j'ai ajouté une case à ma copie de sauter le tir de l'événement, si la valeur n'est pas modifiée. J'ai également ajouté val = String(val), basé sur le raisonnement que setAttribute forcera les numéros de chaînes, de sorte que la comparaison devrait prévoir que.

    Ma version modifiée est: 

    var emulateDOMAttrModified = {

  isSupportedNatively: function () {
    var supported = false;
    function handler() {
      supported = true;
    }
    document.addEventListener('DOMAttrModified', handler);
    var attr = 'emulateDOMAttrModifiedTEST';
    document.body.setAttribute(attr, 'foo'); //aka $('body').attr(attr, 'foo');
    document.removeEventListener('DOMAttrModified', handler);
    document.body.removeAttribute(attr);
    return supported;
  },

  install: function () {
    if (!this.isSupportedNatively() &&
      !Element.prototype._setAttribute_before_emulateDOMAttrModified) {
      Element.prototype._setAttribute_before_emulateDOMAttrModified = Element.prototype.setAttribute
      Element.prototype.setAttribute = function(name, val) {
        var prev = this.getAttribute(name);
        val = String(val); /* since attributes do type coercion to strings,
           do type coercion here too; in particular, D3 animations set x and y to a number. */
        if (prev !== val) {
          this._setAttribute_before_emulateDOMAttrModified(name, val);
          var e = document.createEvent('MutationEvents');
          e.initMutationEvent('DOMAttrModified', true, true, null, prev, val, name, 2);
          this.dispatchEvent(e);
        }
      };
    }
  }

};

//Install this when loaded.  No other file needs to reference this; it will just make Chrome and Safari
//support the standard same as Firefox does.
emulateDOMAttrModified.install();
    InformationsquelleAutor Bob Kanefsky
  4. 0

    Veuillez consulter le code:
    https://github.com/meetselva/attrchange/blob/master/attrchange.js
    'DOMAttrModified' + ('propertychange' pour IE) sont utilisés comme dans votre cas. Si il n'est pas approprié pour vous, le "laid" solution qui puisse satisfaire cette demande devrait être setInterval(function(){}, retard)
    Sinon voir Sean Hogan post ci-dessus.

    InformationsquelleAutor user1700099
  5. 0

    De la solution fournie par @Filip est proche (et peut-être travaillé à l'époque), mais maintenant, vous devez demander la livraison de l'ancienne valeur de l'attribut.

    Ainsi, vous aurez envie de changement :

    observer.observe(element, { attributes: true, subtree: bubbles });

    à ceci:

    observer.observe(element, { attributes: true, attributeOldvalue:true, subtree: bubbles });

    Sinon, vous ne verrez pas le oldValues (vous obtiendrez la valeur null à la place.) Cela a été testé dans Chrome 34.0.1847.131 (compilation Officiel 265687) m.

    InformationsquelleAutor user1055892