Question

有没有办法检测文件外观何时发生变化？例如：

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

Answer 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?

Answer 2

由于我认为您正在尝试检测方面是否发生了变化，因此您需要这样做。

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

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

Answer 3

我也在寻找这个。显然不是。但是应该可以实现一个。据我所知，对于要更改外观的文档，以下其中一项是正确的：

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

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

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

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

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

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

3 个答案: