MutationObserver#
new MutationObserver()#
Interfejs MutationObserver może być wywoływany w roli konstruktora, dzięki czemu pozwala na bezpośrednie tworzenie nowych obserwatorów zmian wprost z interfejsu. Przy tworzeniu obserwatora zmian od razu ustalana jest jego funkcja zwrotna (def. Web IDL).
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var new_observer = new MutationObserver(callback);gdzie poszczególne człony oznaczają:
- new_observer - referencja do nowego obserwatora zmian.
- callback - funkcja zwrotna typu
MutationCallback, która będzie wywoływana automatycznie, kiedy nowy obserwator zmian został zarejestrowany dla węzłów za pomocą metodyMutationObserver.observe(), i kiedy nastąpiła określona zmiana w węzłach. Opcjonalnie do funkcji zwrotnej można przekazać dwa argumenty (nazwy parametrów ustalamy sami przy definiowaniu funkcji zwrotnej):- Pierwszy to sekwencja obiektów typu
MutationRecord. W przypadku JS odpowiednikiem sekwencji jest tablica. - Drugi to nowy obserwator zmian we własnej postaci. W funkcji zwrotnej będzie on udostępniany także pod wartością
this.
- Pierwszy to sekwencja obiektów typu
Algorytm wywołania konstruktora new MutationObserver(callback) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Utwórz nowy obiekt typu
MutationObserverz funkcją zwrotną ustawioną na callback, dołącz go do listy z obiektami typuMutationObserverskojarzonej z jednostką powiązanych podobnych względem pochodzenia kontekstów przeglądania, i na koniec zwróć go.
Obiekt zwracany przez konstruktor new MutationObserver() implementuje interfejs MutationObserver, dlatego ma dostęp do wszystkich poleceń z tego interfejsu (oraz z kolejnych interfejsów w łańcuchu dziedziczenia).
Prosty przykład:
<script>
var new_observer = new MutationObserver(function(records, observer){
// W czasie wywołania funkcji zwrotnej (wewnątrz niej) mamy dostęp do:
// records - lista ze wszystkimi zarejestrowanymi zmianami w postaci obiektów MutationRecord
// observer - nasz new_observer (to samo będzie pod wartością this)
});
document.write(new_observer + "<br>"); // [object MutationObserver]
document.write(new_observer.constructor + "<br>"); // function MutationObserver() { [native code] }
document.write(new_observer.disconnect + "<br>"); // function disconnect() { [native code] }
document.write(new_observer.observe + "<br>"); // function observe() { [native code] }
document.write(new_observer.takeRecords); // function takeRecords() { [native code] }
</script>Konstruktor new MutationObserver() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[Constructor(MutationCallback callback)] interface MutationObserver { };