MutationObserver, ResizeObserver и contenteditable
Иногда требуется отследить не событие на элементе, а изменения, произошедшие с самим элементом.
Например, что-то произошло с элементом, и тогда мы производим какое-то действие.
Для этого нужен встроенный объект MutationObserver.
В качестве примера, рассмотрим обычный блок на странице, его код:
Если для блока прописать дополнительно атрибут contenteditable
Теперь можно прямо на странице сайта кликнуть мышкой внутри этого блока и что-то, например, написать
Данный атрибут полезен и важен при разработке, к примеру, административных панелей.
Чтобы отслеживать происходящие внутри этого блока изменения, получим его со страницы и создадим сущность(обсервер), которая будет следить за этим блоком:
Внутрь обсервера мы должны добавить функцию, которая будет запускаться после того, как будет происходить какое-то изменение элемента .box.
Аргументом в данной функции будет mutationRecords (список изменений), его мы выведем в консоль, чтобы посмотреть, что туда будет приходить при изменениях с элементом:
Теперь нам нужно дать скрипту команду, чтобы он следил за нашим блоком .box и если у него что-то меняется, выполнял нашу функцию по выводу в консоль изменений.
Для этого используется метод observe(), в которым первым аргументом будет тот элемент, за которым нужно следить, а второй аргумент - так называемый config (объект) - конфигурация с теми настройками, за которыми нам нужно следить внутри этого элемента.
По сути, нам нужно отслеживать какие-то определённые вещи, а не все возможные изменения. Список доступных настроек есть в описании к MutationObserver.
Мы выберем отслеживание childList (добавление или удаление дочерних элементов, включая текстовые узлы)
И как только мы что-то ввели в нашем блоке, в консоли получаем данные,что произошли изменения с элементом:
Если мы удалим этот текст, то в консоли также появятся данные, что опять с блоком произошли какие-то изменения.
В консоли мы получаем массив, который содержит объект с данными об изменениях элемента.
Важные уточнения:
1) observer срабатывает уже после изменений в элементе
2) срабатывание является асинхронным, поэтому может выполниться чуть раньше или чуть позже, в зависимости от различных условий
Когда вам уже нет необходимости отслеживать изменения для элемента, можно просто удалить observer
ResizeObserver() работает по тому же принципу, но отслеживает изменения размеров элементов.
Например, что-то произошло с элементом, и тогда мы производим какое-то действие.
Для этого нужен встроенный объект MutationObserver.
В качестве примера, рассмотрим обычный блок на странице, его код:
Код
<div class="box"></div>
Если для блока прописать дополнительно атрибут contenteditable
Код
<div contenteditable class="box"></div>
Теперь можно прямо на странице сайта кликнуть мышкой внутри этого блока и что-то, например, написать
Данный атрибут полезен и важен при разработке, к примеру, административных панелей.
Чтобы отслеживать происходящие внутри этого блока изменения, получим его со страницы и создадим сущность(обсервер), которая будет следить за этим блоком:
Код
const box = document.querySelector('.box');
let observer = new MutationObserver();
let observer = new MutationObserver();
Внутрь обсервера мы должны добавить функцию, которая будет запускаться после того, как будет происходить какое-то изменение элемента .box.
Аргументом в данной функции будет mutationRecords (список изменений), его мы выведем в консоль, чтобы посмотреть, что туда будет приходить при изменениях с элементом:
Код
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
console.log(mutationRecords);
});
Теперь нам нужно дать скрипту команду, чтобы он следил за нашим блоком .box и если у него что-то меняется, выполнял нашу функцию по выводу в консоль изменений.
Для этого используется метод observe(), в которым первым аргументом будет тот элемент, за которым нужно следить, а второй аргумент - так называемый config (объект) - конфигурация с теми настройками, за которыми нам нужно следить внутри этого элемента.
По сути, нам нужно отслеживать какие-то определённые вещи, а не все возможные изменения. Список доступных настроек есть в описании к MutationObserver.
Мы выберем отслеживание childList (добавление или удаление дочерних элементов, включая текстовые узлы)
Код
const box = document.querySelector('.box');
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
observer.observe(box, {
childList: true
});
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
observer.observe(box, {
childList: true
});
И как только мы что-то ввели в нашем блоке, в консоли получаем данные,что произошли изменения с элементом:
Если мы удалим этот текст, то в консоли также появятся данные, что опять с блоком произошли какие-то изменения.
В консоли мы получаем массив, который содержит объект с данными об изменениях элемента.
Важные уточнения:
1) observer срабатывает уже после изменений в элементе
2) срабатывание является асинхронным, поэтому может выполниться чуть раньше или чуть позже, в зависимости от различных условий
Когда вам уже нет необходимости отслеживать изменения для элемента, можно просто удалить observer
Код
'use strict';
const box = document.querySelector('.box');
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
observer.observe(box, {
childList: true
});
// отключаем обсервер
observer.disconnect();
const box = document.querySelector('.box');
let observer = new MutationObserver(mutationRecords => {
console.log(mutationRecords);
});
observer.observe(box, {
childList: true
});
// отключаем обсервер
observer.disconnect();
ResizeObserver() работает по тому же принципу, но отслеживает изменения размеров элементов.
Всего комментариев: 0