una - validacion de formularios con javascript ejemplos

¿Puede tener un activador de enganche de javascript después de que cambie el objeto de estilo de un elemento DOM?

Question

Un elemento tiene un objeto de style javascript que contiene los diferentes nombres y valores de los estilos css. Me gustaría activar una función cada vez que este objeto cambie sin usar el sondeo . ¿Hay alguna forma de hacer esto de una manera que sea compatible con todos los navegadores y que funcione de manera confiable con el código de terceros (porque digamos que está proporcionando un script de inserción)? DOMSubtreeModified será suficiente DOMSubtreeModified un evento javascript como DOMAttrModified o DOMSubtreeModified porque no funcionan en Chrome.

Answer 1

En respuesta a una pregunta similar , se sugirió que si sabía que las interacciones de configuración de estilo se realizarían a través de una interfaz estándar (es decir, siempre utilizando jQuery, etc.), se sugería que se activaran eventos personalizados siempre que se llamara al método de la biblioteca.

Esto permitiría una matriz de soporte más amplia pero dejaría cualquier cambio de propiedad ignorado si se realiza sin usar el método de la biblioteca. También parece que este enfoque no es aplicable a los creadores nativos, ya que no siempre se puede confiar en ellos.

Answer 2

He encontrado este pequeño complemento que hace exactamente eso y se puede cambiar para agregar cualquier mutación que desee ... Incluso escuche el cambio scrollHeight.

El complemento: http://www.jqui.net/jquery-projects/jquery-mutate-official/

Aquí está la demostración: http://www.jqui.net/demo/mutate/

Answer 3

Incluso para todos los Browers más modernos, no existe una forma de navegador cruzado para lograr esto. Tendría que enrutar todos sus cambios de estilo css a través de una función que podría activar escuchas de eventos. Este sería el método más limpio.

Answer 4

Puedes usar attrchange jQuery plugin . La función principal del complemento es vincular una función de escucha en el cambio de atributo de los elementos HTML.

Answer 5

EDIT2:

Si aún desea usar el mutation observer , use esta biblioteca: mutation-summary

EDITAR:

Como dije en mi respuesta a continuación y gracias a Vega por su comentario, no se recomienda el uso de object.watch como mutation observers object.watch o de mutation observers en aplicaciones grandes. Esta es la cita real de MDN :

En general, debe evitar usar watch() y unwatch() cuando sea posible. Estos dos métodos se implementan solo en Gecko, y están destinados principalmente para el uso de depuración. Además, el uso de puntos de observación tiene un serio impacto negativo en el rendimiento, lo que es especialmente cierto cuando se utiliza en objetos globales , como la ventana. Por lo general, puedes usar setters y getters o proxies en su lugar. Ver Compatibilidad para más detalles.

Advertencia

Por lo tanto, si la compatibilidad entre navegadores está en su lista de verificación, Nuevamente, le sugiero encarecidamente que anule los setter y getter de los objetos de style .

use object.watch y tenga esto en cuenta para una solución de navegador cruzado:

• Javascript Object.Watch para todos los navegadores?
• object.watch polyfill
• Esté atento a los cambios en las propiedades de los objetos en JavaScript

También puede anular los métodos getter y setter del objeto de style del elemento.

Hay un complemento de jQuery disponible para esto, reloj jQuery

Answer 6

Edición 4: Demo en vivo

$(function() {
  $(''#toggleColor'').on(''click'', function() {
    $(this).toggleClass(''darkblue'');
  }).attrchange({
    trackValues: true,
    callback: function(event) {
      $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");
    }
  });
});

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#toggleColor {
  height: 70px;
  width: 300px;
  padding: 5px;
  border: 1px solid #c2c2c2;
  background-color: #DBEAF9;
}
#toggleColor span {
  font-weight: bold;
}
#toggleColor.darkblue {
  background-color: #1A9ADA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<p>Click below div to toggle class darkblue.</p>
<div id="toggleColor"></div>

Edición 3: He reunido todo esto como un complemento que se puede descargar desde git attrchange y aquí está la página de demostración .

Edición 2:

1. Corrección para propertName en IE7 y IE8

Edición 1:

1. Manejar múltiples elementos
2. Ordenó las condiciones como MutationObserver, DOMAttrModified y onpropertychange para una mejor implementación.
3. Añadido nombre de atributo modificado a la devolución de llamada.

Gracias a @benvie por sus comentarios.

DEMO: http://jsfiddle.net/zFVyv/10/ (Probado en FF 12, Chrome 19 e IE 7.)

$(function() {
    (function($) {
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

        function isDOMAttrModifiedSupported() {
            var p = document.createElement(''p'');
            var flag = false;

            if (p.addEventListener) p.addEventListener(''DOMAttrModified'', function() {
                flag = true
            }, false);
            else if (p.attachEvent) p.attachEvent(''onDOMAttrModified'', function() {
                flag = true
            });
            else return false;

            p.setAttribute(''id'', ''target'');

            return flag;
        }

        $.fn.attrchange = function(callback) {
            if (MutationObserver) {
                var options = {
                    subtree: false,
                    attributes: true
                };

                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(e) {
                        callback.call(e.target, e.attributeName);
                    });
                });

                return this.each(function() {
                    observer.observe(this, options);
                });

            } else if (isDOMAttrModifiedSupported()) {
                return this.on(''DOMAttrModified'', function(e) {
                    callback.call(this, e.attrName);
                });
            } else if (''onpropertychange'' in document.body) {
                return this.on(''propertychange'', function(e) {
                    callback.call(this, window.event.propertyName);
                });
            }
        }
    })(jQuery);

    $(''.test'').attrchange(function(attrName) {
        alert(''Attribute: '' + attrName + '' modified '');
    }).css(''height'', 100);

});

Árbitro:

1. Detectar si DOMAttrModified es compatible
2. DOMAttrModified para chrome
3. Observador de mutaciones
4. ¿Por qué deberíamos evitar usar eventos de mutación?
5. onPropertyChange IE

Mutation Observers es el reemplazo propuesto para los eventos de mutación en DOM4. Se espera que se incluyan en Firefox 14 y Chrome 18.

Soporte del navegador:

onpropertychange - es compatible con IE (probado en IE 7)

DOMAttrModified - es compatible con IE 9, FF y Opera

MutationObservers : es muy nuevo y funcionó bien en Chrome 18 . No estoy seguro de hasta qué punto es compatible y aún no se ha probado en Safari.

Gracias a @benvie por agregar información sobre WebkitMutationObserver