Alternative zu DOMNodeInserted

DOMNodeInserted ist bekannt, um dynamische Seiten langsam, MDN empfiehlt sogar, nicht verwenden insgesamt, aber bietet keine alternativen.

Ich bin nicht interessiert in das element eingefügt wurde, muss ich nur wissen, wenn einige Skript ändert den DOM. Gibt es eine bessere alternative zu mutation-event-Listener (vielleicht getElementsByTagName innerhalb einer nsiTimer)?

InformationsquelleAutor der Frage Fábio | 2011-08-09

  1. 40

    Wenn Sie erstellen eine web-app, die Ziele, aktuelle Mobiltelefone und neuere Versionen von Browsern (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), können Sie den folgenden code zum erstellen einer Super event, für das einfügen von dom-Knoten, und es führt sogar auf die Knoten zunächst Teil der Seite statisch mark-up!

    Hier ist der link, um den vollständigen Beitrag mit und Beispiel: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

    Hinweis auf Mutation Beobachter:während der neuere Mutation Beobachter-features in neueren Browsern sind ideal für die überwachung einfache Einfügungen und änderungen am DOM, verstehen Sie, dass diese Methode kann verwendet werden, um weit mehr tun, als es Ihnen erlaubt zu überwachen, für jede CSS-Regel Sie können Sache. Das ist super kraftvoll für viele Anwendungsfälle, so wickelte ich diese in einer Bibliothek hier: https://github.com/csuwildcat/SelectorListener

    Müssen Sie die entsprechenden Präfixe zu den CSS-und animationstart event-Namen, wenn Sie wollen, Ziel verschiedenen Browsern. Lesen Sie mehr dazu im Beitrag im Zusammenhang mit oben.

    Die grundlegenden Knoten insertion Fall

    CSS:

    @keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

div.some-control {
    animation-duration: 0.01s;
    animation-name: nodeInserted;
}

    JavaScript:

    document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        //Do something here
    }
}, true);

    Hören bei komplexeren Selektor zutrifft:

    Dadurch können Dinge, die fast unmöglich zu tun mit Mutation Beobachter

    CSS:

    @keyframes adjacentFocusSequence {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

.one + .two + .three:focus {
    animation-duration: 0.01s;
    animation-name: adjacentFocusSequence;
}

    JavaScript:

    document.addEventListener('animationstart', function(event){
    if (event.animationName == 'adjacentFocusSequence'){
        //Do something here when '.one + .two + .three' are 
        //adjacent siblings AND node '.three' is focused
    }
}, true);

    InformationsquelleAutor der Antwort csuwldcat

  2. 10

    Eine neue alternative, die @naugtur kurz erwähnt ist MutationObserver. Es ist konzipiert als Ersatz für die veralteten mutation-events, wenn der browser(s) Sie entwickeln für die die es unterstützt (wenn man z.B. die Entwicklung einer browser-Erweiterung).

    InformationsquelleAutor der Antwort Mike Henry

  3. 0

    Die gleiche Technik wie csuwldcat beschrieben wurde, in ein einfach zu verwendendes jQuery-plugin (wenn das dein Ding ist): https://github.com/liamdanger/jQuery.DOMNodeAppear

    InformationsquelleAutor der Antwort Arktype

  4. -1

    Dies ist hier gepostet, da diese Frage ist, wo ich gelandet auf der Suche nach Hilfe mit DOMNodeInserted andernfalls mit IE9, aber bitte beachten: diese Lösung ist speziell für eine situation, in der jQuery eingesetzt wird, der innerhalb einer ASP.NET Kontext, verwendet eine Ende-Anforderung-Funktion. Ihre Laufleistung kann variieren, etc....

    Grundsätzlich, schmeißen wir Sie Weg, die DOMNodeInserted insgesamt und End-Anforderung zum laden unserer event-handler:

    ALT:

    $(document).ready(function() {

$(document).bind('DOMNodeInserted', function(event){
My jQuery event handler...

 }); 
});

    ===================================

    NEU:

    function Ajax_EndRequest {
  function2();
}

function2 (a,b){
  My jQuery event handler...
}

$(document).ready(function(){
  add_endRequest(Ajax_EndRequest); //this is what actually invokes the function upon request end.

 My jQuery event handler...//REMOVED -- don't need this now
});

    InformationsquelleAutor der Antwort ColdSharper

  5. -20

    Wenn alles, was Sie tun möchten ist, ein Ereignis auszulösen, wenn sich das DOM ändert, tun Sie etwas wie dieses:

    var nodes=document.getElementsByTagName('*')||document.all;

function domchange(){
    alert('Hello');
}

window.setInterval(function(){
    var newnodes=document.getElementsByTagName('*')||document.all;
    if(newnodes!=nodes){
        nodes=newnodes;
        domchange();
    }
},1);

    InformationsquelleAutor der Antwort Anonymous

Schreibe einen Kommentar