Qual è la differenza tra DOMNodeInserted e DOMNodeInsertedIntoDocument?

Question

Secondo gli eventi DOM in wiki trovate in the wiki link here,

DOMNodeInserted: Fires quando un nodo è stato aggiunto come figlio di un altro nodo

DOMNodeInsertedIntoDocument: Viene eseguito quando un nodo viene inserito in un documento

Ora qual è la vera differenza? Non dovrebbero entrambi gli eventi essere uguali? Se non quando e dove dovrebbe essere usato?

Lo scenario in cui sto utilizzando gli eventi DOM sopra menzionati è che, ho un set di pagine e ogni pagina carica un file nav.jsp all'interno di un div riservato per la navigazione. Ora voglio evidenziare la scheda di navigazione della pagina corrente, quindi gli do una piccola proprietà di background dopo che l'elemento DOM (nav DIV) è stato caricato.

Ora per il mio problema

$(document).on('DOMNodeInserted', function(e) { 
     if(e.target.id=="navigate"){ 
     //........... 
     } 
}); 

lavorato, ma solo curioso quello che è la differenza tra i due eventi specificati nella mia interrogazione.

Answer 1

L'evento DOMNodeInsertedIntoDocument è simile all'evento DOMNodeInserted, ma si verifica quando un nodo viene inserito nel documento.

Ad esempio, se un nodo viene aggiunto a un elemento che non fa parte del documento, viene generato l'evento DOMNodeInserted ma l'evento DOMNodeInsertedIntoDocument non lo è. Se l'elemento padre di un nodo viene inserito nel documento, viene generato l'evento DOMNodeInsertedIntoDocument ma l'evento DOMNodeInserted non lo è.

See JSFiddle: http://jsfiddle.net/ghyga4v6/2/

provare a rimuovere il contenitore quando nodo di testo è ancora lì e inserendolo di nuovo per vedere i diversi eventi innescati.

Answer 2

Non sono uguali perché il primo deve essere attivato quando si aggiunge un nuovo nodo a un nodo che si trova all'esterno del documento (creato e non ancora aggiunto o rimosso in precedenza dal relativo elemento principale).

Answer 3

Here're due articoli si può leggere su

1. DOMNodeInsertedIntoDocument event
2. DOMNodeInserted event

Ad esempio, è possibile inserire Node in BOM elemento per lo sviluppo di un'estensione del browser o di manipolare la storia.

ovvero la BOM consiste di oggetti navigatore, cronologia, schermata, posizione e documento che sono figli della finestra. Nel nodo del documento c'è il DOM, il modello di oggetto del documento, che rappresenta il contenuto della pagina. Puoi manipolarlo usando javascript. (Dalla wiki)

Ecco uno snippet per aiutare, se vuoi continuare a imparare.

$(window).on('DOMNodeInsertedIntoDocument', function(){ 
    console.log('DOMNodeInsertedIntoDocument occurred'); 
}); 

$(window).on('DOMNodeInserted', function(){ 
    console.log('DOMNodeInserted occurred'); 
}); 

A proposito, solo per vostra informazione. MutationObserver sostituisce Mutation Events.