Implementierung eines DOM-Listeners

Question

Ich dachte, es gäbe keinen DOM-Hörer, also habe ich meinen eigenen 'schweren' Hörer implementiert:

function CvHelper(stackApi) {
  var that = this;

  // check if room is finished loading
  this.init = function() {
    if ($('#loading').length) {
      setTimeout(that.init, 1000);
    } else {
      console.log('Chatroom finished loading');

      that.postListener();
    }
  }
}

(function() {
  var stackApi = new StackApi();
  var cvHelper = new CvHelper(stackApi);
  cvHelper.init();
})();

Ich finde das einfach scheiße. Also habe ich eine Suche auf hier auf SO und diese Frage aufgetaucht. Doch die letzte Bemerkung zu der angenommenen Frage besagt, dass sie veraltet ist.

$("#someDiv").bind("DOMSubtreeModified", function() {
  alert("tree changed");
});

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified sagt, dass dieses Ereignis veraltet ist, was würden wir stattdessen verwenden?

Gibt es einen Ersatz dafür?
P.S. Es muss nur auf Chrome funktionieren, weil es eine Chrome-Erweiterung ist.

Answer 1

Le site Mutationsereignis ist derzeit veraltet, da es ein Leistungsproblem darstellt. Bitte verwenden Sie daher die Mutationsbeobachter . Ich habe die DOM-Änderungen Listener in einem meiner Projekte mit Mutation Observer und es funktionierte großartig! Für Ihre weitere Implementierung, werden diese Links Ihnen helfen:

1. http://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object/
2. https://github.com/kapetan/jquery-observe
3. Gibt es einen JavaScript/jQuery DOM change listener?

Answer 2

Wenn Sie einen Blick darauf werfen:

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent

In Bezug auf DOMSubtreeModified heißt es: "Es kann nach einer einzigen Änderung des Dokuments oder nach Ermessen der Implementierung nach mehreren Änderungen ausgelöst werden."

Wenn Sie also ein anderes MutationEvent, z. B. DOMNodeInserted, verwenden, können Sie ein deterministischeres Auslösen von Ereignissen erreichen (Sie müssen dem Knoten in diesem speziellen Fall nur ein Element hinzufügen).

Siehe unten:

$('body').prepend( $('<div id="cow">Hello</div>') );

$('#cow').bind("DOMNodeInserted",function(){ alert('hi'); } );

$('#cow').prepend( $("<div></div>") );

Dies wurde übrigens in Chrome getestet.

Ich hoffe, das hilft...

UPDATE: Sie können auch mehr als einen Ereignistyp mit einem Funktionsaufruf hinzufügen. Zum Beispiel, indem man vier Event-Handler für DOMNodeInserted, DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified hinzufügt und dann alle Handler einen einzigen Handler aufrufen.

UPDATE: Ich habe ein kleines Skript geschrieben, das genau das tut, was ich im vorherigen Update geschrieben hatte:

$('body').prepend( $('<div id="cow">Hello</div>') );

/**
* This function registers event handlers which invoke the mutateHandler 
* handler when any of the MutationEvents are fired on a node: DOMNodeInserted, 
* DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified.
*
*/
var onMutate = function( mutateHandler ){

    var that = this;
    $(this).bind( "DOMNodeInserted", function( event ){ 
        mutateHandler.call( that, event ); 
    });
    $(this).bind( "DOMNodeRemoved", function( event ){ 
        mutateHandler.call( that, event ); 
    });
    $(this).bind( "DOMAttrModified", function( event ){ 
        mutateHandler.call( that, event );
    });
    $(this).bind( "DOMCharacterDataModified", function( event ){ 
        mutateHandler.call( that, event );
    });

};

onMutate.call( $('#cow')[0], function(){
    alert( $(this).attr('id') );
});

$('#cow').prepend( $("<div></div>") );
$('#cow').addClass( 'my_class' );

Answer 3

Es sieht so aus, als ob es nur im Arbeitsentwurf von DOM Level 3 Veranstaltungen die diesen Hinweis enthält:

Warnung! Die Schnittstelle MutationEvent wurde in DOM Level 2 Events eingeführt, ist aber noch nicht vollständig und interoperabel implementiert zwischen User Agents implementiert. Darüber hinaus gibt es Kritik, dass die Schnittstelle, so wie sie entworfen wurde, ein Leistungs- und Implementierungsproblem mit sich bringt. Herausforderung darstellt. Derzeit wird eine neue Spezifikation entwickelt, die Folgendes zum Ziel hat die Anwendungsfälle, die durch Mutationsereignisse gelöst werden, aber in leistungsfähigere Weise. Die vorliegende Spezifikation beschreibt daher Mutationsereignisse als Referenz und zur Vervollständigung des bisherigen Verhaltens, aber die die Verwendung der Schnittstellen MutationEvent und MutationNameEvent Schnittstelle.

Wenn ich also richtig verstanden habe, lautet die Antwort auf die Frage "Gibt es schon eine Vertretung?" "Nein, noch nicht".