javascript: detect when the appearance of the document has changed

Question

Is there a way to detect when the appearance of the document has changed? For example:

$(document).on('change??', function () {
   console.log('My aspect has changed');
});

// changes the appearance of a particular div
$('#my-div').css({width: 320, height: 240});

Also, is there a kind of 'render' event? This event would be fired every time the browser redraws the page. For example:

$(document).on('render', function () {
    console.log('The page has been redrawn');
});

score 0 · Answer 1 · edited May 23 '17 at 12:21

Don't know of any event like that, but if you are in control of all the changes you can easily cause your own events.

Here is a simple JQuery based example to illustrate the idea.

$( "#test" ).on( "mysitechanged", function( event, param1, param2 ) {
  alert( 'changed' );
});
$( "#test").trigger( "mysitechanged", [ "Custom", "Event" ] );

http://api.jquery.com/trigger/

Here is info on how to do it in pure JavaScript

How to trigger event in JavaScript?

score 0 · Answer 2 · answered May 15 '14 at 20:48

Since i think you're trying to detect whether the aspect has changed or not, this is what you're looking for.

window.onresize = function(){
    // your code goes here;
}

Here is a good example of how the window.resize event is handled: http://jsfiddle.net/CoryDanielson/LAF4G/

score 0 · Answer 3 · answered Sep 17 '17 at 16:05

I am on the lookout for that too. Apparently not. However it should be possible to implement one. As far as I know, for the document to change appearance, one of the following is true:

The DOM has changed
The viewport changed (resize, orientation change, media changed, etc.)

You can detect changes to the DOM using MutationObserver, and detect viewport changes using native JavaScript events (onresize, etc.).

I am not sure whether this is necessary or useful (events should cover all realistic cases), but window.matchMedia(media).addListener() will also notify you about media changes to the viewport.

A DOM or viewport change does not necessarily imply a change of appearance, so then you should do some measurements on the page to verify whether anything changed.

More realistically and pragmatically, assuming that you build the page or app, you should be able to predict what would cause a change of appearance (ex: new content loaded through ajax, the user typed something in or clicked a button, new message received, page resized, etc.) and watch for these actions instead.

javascript: detect when the appearance of the document has changed

3 Answers3