Question

添加resize事件（监听窗口大小已更改）的常用方法是：

//works just fine
window.addEventListener("resize", function(){console.log('w')}, true)

但我想将此事件处理程序添加到document.body，或者更好地添加到document（不要问我为什么，但我不能使用窗口）< / p>

//this dosn't work
document.body.addEventListener("resize", function(){console.log('b')}, true)

//this also dosn't work
document.addEventListener("resize", function(){console.log('d')}, true)

问题是这不起作用。我真的不明白为什么？ MB我错过了什么？

这有效（但我想再次使用addEventListener）

document.body.onresize = function(){console.log('a')}

为什么document.addEventListener("resize", function(){console.log('d')}, true)不起作用？

UPD＃1

有没有办法在其他窗口上捕获window.onresize？

UPD＃2

如果window是唯一获得调整大小的对象，那么为什么这有效呢？ O_O

document.body.onresize = function(){console.log('a')}

Answer 1

Mozilla Docs says:

“任何元素都可以被赋予 onresize属性，但只有窗口对象有调整大小事件。调整其他元素的大小（比如修改宽度或高度）使用脚本的img元素不会引发resize事件。“

请检查A working example

function winResize(e){
 console.log('window reiszed',e);

  //body resize when width increases
 document.getElementById('content').innerHTML+='<div style="width:900px;background:green;border:1px solid red">'+Date()+'</div><br/>';
}

function docResize(e){
 cosole.log('document resized');   
}

function bodyResize(e){
 console.log('body resized');
}

window.addEventListener("resize", winResize);
document.body.onresize=bodyResize;

<强>编辑：如果停止事件，则不会调用bubble.body.onresize事件：例如

 function winResize(e){
     console.log('window reiszed',e);
     e.stopImmediatePropagation()
   }

* 更新：*

a）首先要了解的是resize事件将从中传播 window > document > body如果您已在所有上述节点上定义了resize事件，并且others该事件将向下传播并且每个节点都将被调用

b）当你提出差异时，不适用window.resize和[body/document].onresize就是这样 window.resize事件是html4规范中定义的标准事件，[body / document] .onresize可用作非标准事件（某些浏览器已实现，但并非全部）但后面的onresize事件在HTML5 specification中添加到正文中。

为了满足自己，请转到w3c validation site并使用Doctype验证以下html html 4.01 strict，您会看到它会在onresize属性上抱怨：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html><head><title>test</title></head> 
   <body onresize="somefunc()">
    <div> On resize validation </div>
    </body>
   </html>

c）结论。 window.addEventListener（）附带的Dom级别2事件规范仅在该规范中指定add events listern for events（Dom级别3事件也支持此项），read DOM levels.＆amp; this

Answer 2

由于文档没有调整大小，窗口会执行并实现滚动条以满足文档，正文等。

Answer 3

你应该看一下浏览器的解剖结构并查看哪个对象有哪些事件，窗口有一个resize事件，当窗口大小发生变化时触发该事件，文档驻留在窗口对象内部{{ 1}}并且层次结构中的每个都有自己的事件。

Answer 4

这个对我有用，使用jQuery：

var windowWidth  = $(window).width();
var windowHeight = $(window).height()
window.addEventListener("orientationchange", function() {
        windowWidth  = $(window).width();
        windowHeight = $(window).height();
}, false);

我错过了什么？ HTML＆gt;身体 - 调整大小事件

4 个答案: