10

添加调整大小事件（监听窗口大小改变）的常用方法是：

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

但我想将此事件处理程序添加到document.body甚至更好document（不要问我为什么，但我不能使用窗口）

//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')}
4

3 回答 3

11

Mozilla Docs 说：

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

请检查一个工作示例 

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;

编辑： 如果您停止事件，则不会调用气泡 document.body.onresize 事件：例如

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

*更新：*

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

b）当您询问 b/w 差异时window.resize，[body/document].onresize该 window.resize事件是 html4 规范中定义的标准事件，并且 [body/document].onresize 可作为非标准事件使用（某些浏览器已实现但不是全部）但后一个 onresize 事件是在HTML5 规范中添加的 到身体。

只是为了满足自己去w3c 验证站点并使用 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 级事件规范，只为该规范中指定的事件添加事件侦听器（Dom 3 级事件也支持这一点），读取 DOM 级别。&这个

于 2013-01-03T13:02:33.867 回答
2

您实际上应该查看浏览器的结构并查看哪个对象有哪些事件，窗口有一个调整大小事件，当窗口大小发生变化时触发，一个文档位于一个窗口对象内部window->document->elements，每个对象都在层次结构中有他们自己的事件。

于 2013-01-03T11:10:34.193 回答
0

这个对我有用，使用 jQuery：

var windowWidth  = $(window).width();
var windowHeight = $(window).height()
window.addEventListener("orientationchange", function() {
        windowWidth  = $(window).width();
        windowHeight = $(window).height();
}, false);
于 2013-10-23T20:04:34.183 回答