javascript：检测文档的外观何时发生变化答案

【问题标题】：javascript: detect when the appearance of the document has changedjavascript：检测文档的外观何时发生变化
【发布时间】：2017-09-18 00:05: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');
});

【问题讨论】：

标签： javascript html events document redraw

【解决方案1】：

不知道有什么类似的事件，但如果你能控制所有的变化，你很容易引发你自己的事件。

这是一个简单的基于 JQuery 的示例来说明这个想法。

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

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

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

How to trigger event in JavaScript?

【讨论】：

【解决方案2】：

由于我认为您正在尝试检测方面是否已更改，因此这就是您要查找的内容。

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

下面是如何处理 window.resize 事件的一个很好的例子：http://jsfiddle.net/CoryDanielson/LAF4G/

【讨论】：

【解决方案3】：

我也在寻找它。显然不是。但是，应该可以实现一个。据我所知，要让文档改变外观，以下情况之一是正确的：

DOM 已更改
视口已更改（调整大小、方向更改、媒体更改等）

您可以使用 MutationObserver 检测 DOM 的变化，并使用原生 JavaScript 事件（onresize 等）检测视口变化。

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

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

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

【讨论】：