检测文档的外观何时发生变化

javascript: detect when the appearance of the document has changed

本文关键字：变化 何时发 外观 文档 检测      更新时间：2023-09-26

是否有一种方法可以检测文档的外观何时发生了变化?例如:

$(document).on('change??', function () {
   console.log('My aspect has changed');
});
// changes the appearance of a particular div
$('#my-div').css({width: 320, height: 240});

还有，是否有一种"渲染"事件?每次浏览器重新绘制页面时都会触发此事件。例如:

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

我不知道有这样的事件，但如果你能控制所有的变化，你可以很容易地引起自己的事件。

下面是一个简单的基于JQuery的例子来说明这个想法。 
$( "#test" ).on( "mysitechanged", function( event, param1, param2 ) {
  alert( 'changed' );
});
$( "#test").trigger( "mysitechanged", [ "Custom", "Event" ] );
http://api.jquery.com/trigger/

这里是关于如何在纯JavaScript中做到这一点的信息

如何在JavaScript中触发事件?

既然我认为你试图检测方面是否已经改变，这就是你正在寻找的。

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

这是一个很好的例子，如何窗口。调整大小事件:http://jsfiddle.net/CoryDanielson/LAF4G/

我也在寻找。显然不是。然而，应该有可能实现一个。据我所知，要改变文档的外观，以下条件之一是正确的:

  • DOM已经改变
  • 视口改变(调整大小，方向改变，媒体改变等)

你可以使用MutationObserver来检测DOM的变化，并使用原生JavaScript事件(onresize等)来检测视口的变化。

我不确定这是必要的还是有用的(事件应该涵盖所有现实的情况)，但是window.matchMedia(media). addlistener()也会通知你关于媒体的变化。

DOM或视口的更改并不一定意味着外观的更改，因此您应该对页面进行一些测量以验证是否有任何更改。

更现实和实用的是，假设你构建了页面或应用程序，你应该能够预测什么会导致外观的变化(例如:通过ajax加载新内容，用户输入或点击按钮，收到新消息，页面大小调整等)，并观察这些动作。

相关文章：