Создание слушателя, который срабатывает при изменении содержимого веб-страницы, включает в себя технологию, известную как "Mutation Observers" в JavaScript. Mutation Observers представляют собой API, которые предоставляют возможность реагировать на изменения в DOM.
Здесь пример простого слушателя, который ведет слежение за изменениями в теле документа:
```javascript
// выбираем целевой элемент
var target = document.querySelector('body');
// создаем экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('Содержимое страницы было изменено');
});
});
// настройка наблюдателя
var config = { childList: true, subtree: true };
// передаем в наблюдатель целевой элемент и его настройки
observer.observe(target, config);
// позже можно остановить наблюдение
// observer.disconnect();
```
В этом коде перед тем, как начать наблюдение, вы сконфигурируете наблюдатель, указав, какие типы мутаций вы хотите наблюдать. В этом случае он будет слушать изменения дочерних элементов (childList: true) и их поддерева (subtree: true).
Экземпляр наблюдателя вызывает функцию обратного вызова для каждого батча изменений, которые происходят в DOM. Это обеспечивает не только уведомления о том, что что-то изменилось, но и полезную информацию о том, какие именно узлы были добавлены или удалены и где именно эти изменения произошли.