Материалы к уроку
Ресурсы: Документация MutationRecord Пример использования ResizeObserver Использование ResizeObserver Курс по админке
Если нам понадобится отслеживать не события, а изменения, происходящие с элементом, тогда нам понадобится встроенный объект
MutationObserver.
Он довольно прост в использовании и содержит массу полезной информации.
Допустим, у нас есть какой-то пустой блок с заданными размерами, если что-то в нём меняется, то мы должны воспроизводить какие-то действия.
Какие это изменения?
Они могут быть вызваны скриптом, например, внутри этого элемента могут быть созданы, изменены или удалены другие элементы.
Особенно актуально это при работе с данными полученными от сервера, когда на основе этих данных мы работаем с элементами интерфейса.
Простой пример: мы получили от сервера курс валют и разместили его внутри нашего блока.
А теперь будем разбирать на простом примере, у нас есть блок с классом
.box Для этого блока мы добавим атрибут
contenteditable Код
<div contenteditable class="box"></div>
И теперь если клинуть мышкой по этому блоку, то прямо в нем можно написать какой-то текст. Но если перезагрузить страницу, то этот текст пропадёт, потому что его надо где-то сохранять.
Такие блоки хорошо использовать в административной панели, когда можно зайти и прямо н сайте вносить какие-то изменения, с последующим их сохранением.
Так как сейчас мы можем как-то менять этот блок (писать внутри него тот же текст), давайте будем отслеживать изменения этого блока.
Получим наш блок со страницы:
Код
const box = document.querySelector('.box');
Теперь нам нужно создать сущность, которая будет следить за этим блоком.
Код
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
Объект, который будет следить за чем-то мы создали, осталось только дать ему указание следить за изменениями конкретного элемента, и если в нём что-то меняется, выполняй функцию
mutationRecords.
Код
observer.observe(box, {
childList: true;
});
в данном случае в качестве первого аргумента содержит элемент, за которым будем следить, а второй аргумент - это конфигурация отслеживаемых параметров.
Здесь можно посмотреть в пункте
MutationObserverInit доступные свойства, которые мы можем отслеживать.
В данном случае в коде выше мы будем следить за конкретными изменениями в нашем блоке, а именно: добавляются или удаляются какие-либо дочерние элементы и текстовые узлы в том числе.
Если мы сейчас зайдём на страницу и что-то напишем внутри нашего блока, то в консоли увидим, что у нас при добавлении текстового узла сработало событие:
Цитата
[MutationRecord]
0: MutationRecord {type: 'childList', target: div.box, addedNodes: NodeList(1), removedNodes: NodeList(0), previousSibling: null, …}
length: 1
Если мы удалим текст, то в консоли также сработает событие:
Цитата
[MutationRecord]
0: MutationRecord {type: 'childList', target: div.box, addedNodes: NodeList(0), removedNodes: NodeList(1), previousSibling: null, …}
length: 1
В консоли мы получаем массив, содержащий первым своим элементом объект с данными об изменениях которые произошли во время события.
Важно: Observer срабатывает уже после изменений, то есть вы не можете что-то сделать во время действия, а работаете уже с результатом изменений.
Всё это асинхронная операция, отслеживание может выполниться чуть позже или чуть раньше в зависимости от различных условий.
Когда вам больше не нужно следить за объектом, вы можете просто удалить его:
Код
observer.disconnect();
Добавлять комментарии могут только зарегистрированные пользователи.
