Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Событие на изменение содержания (https://javascript.ru/forum/events/21796-sobytie-na-izmenenie-soderzhaniya.html)

JIEXA 24.09.2011 16:54

Событие на изменение содержания
 
Скорее всего из серии нереального, но вдруг.

Скажите, есть ли какая-нибудь возможность поставить на body обработчик любых изменений содержания? Объяснить сложно, покажу на псевдокоде, с использованием jquery.

<html>
<body>
<div id="content"></div>
</body>
</html>


$(document).ready(function(){
   $('body').change(function(){
     console.log('содержание body или дочерних элементов изменилось');
   });

   // Изменяем body, чтобы вызвалось change
  $('body').append('text');
  
  // Изменяем дочерний элемент, чтобы опять же вызвалось change
  $('#content').html('text'); 
});


Понятное дело, что такой код не будет работать.
Но возможно ли реализовать что-то подобное?

melky 24.09.2011 17:14

document.body.__defineSetter__("innerHTML", function(){
     alert("изменение страницы detected");
});



вообще, существует определенное событие изменения структуры страницы. Тип этих событий называется Mutation

И включает в себя такие события
  • DOMSubtreeModified
  • DOMNodeInserted
  • DOMNodeRemoved
  • DOMNodeRemovedFromDocument
  • DOMNodeInsertedIntoDocument
  • DOMAttrModified
  • DOMCharacterDataModified

События не отменяются (т.е. нельзя отменить действие по-молчанию, как, например, отправка формы).

Они всплывают (за исключением DOMNodeRemovedFromDocument и DOMNodeInsertedIntoDocument )

Обработчику события передается ивэнт (очевидно. как и обычно при клике).

Что содержит этот ивэнт - можно почитать в документации

НО! пока это не работает.. т.е. проследить за изменением страницы посредством этих событий нельзя - не реализовано ещё.

Но я попробую :)

По клику по кнопке к телу документа будет ченить добавляться.
Попробуем проследить это.

Событие DOMNodeInserted отлично подойдёт - ведь добавляемый по клику текст является элементом TextNode. А оно идёт от NODE. т.е. будет встявляться узел при клике.
<button onclick="document.body.innerHTML+='<br>Clicked'">click</button>

<script>
document.body.addEventListener("DOMNodeInserted",function(e){ alert('страница изменена'); },false);
</script>


неколько алертов возникают из-за всплытия, наверное :)

PS ни-я. оно работает О_О. Ch14


Часовой пояс GMT +3, время: 00:44.