javascript：检测文档的外观何时发生更改

是否有方法检测文档的外观何时更改？例如：

$(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');
});

此外，是否存在一种“渲染”事件？每次浏览器重新绘制页面时都会触发此事件。例如：

$(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" ] );

下面是关于如何在纯JavaScript中实现这一点的信息

---

因为我认为您正在尝试检测方面是否发生了变化，这就是您要寻找的

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

---

下面是一个处理window.resize事件的好例子：

我也在关注这个问题。显然不是。但是，应该可以实现一个。 据我所知，对于要更改外观的文档，以下情况之一是正确的：

• DOM发生了变化
• 视口已更改（大小调整、方向更改、媒体更改等）

您可以使用MutationObserver检测对DOM的更改，并使用本机JavaScript事件（onresize等）检测视口更改

我不确定这是否必要或有用（事件应涵盖所有实际情况），但window.matchMedia（media）.addListener（）还将通知您视口中的媒体更改

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

更现实、更实用的是，假设您构建了页面或应用程序，您应该能够预测会导致外观变化的因素（例如：通过ajax加载的新内容、用户键入内容或单击按钮、收到新消息、页面大小调整等），并观察这些操作