javascript 我错过了什么？HTML > 正文 - 调整大小事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14137629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Did i miss something? HTML > Body - resize event
提问by obenjiro
Usual way to add resize event (to listen window size changed) is this:
添加调整大小事件（监听窗口大小改变）的通常方法是：
//works just fine
window.addEventListener("resize", function(){console.log('w')}, true)
but I want to add this event handler to document.bodyor even better to document(don't ask me why, but i can't use window)
但我想将此事件处理程序添加到document.body甚至更好document（不要问我为什么，但我不能使用 window）
//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)
the problem is that this dosn't work. I really don't understand why? MB i missed something?
问题是这行不通。我真的不明白为什么？MB我错过了什么？
this works ( but ones again i want to use addEventListener)
这有效（但我想再次使用addEventListener）
document.body.onresize = function(){console.log('a')}
So why document.addEventListener("resize", function(){console.log('d')}, true)doesn't work?
那么为什么document.addEventListener("resize", function(){console.log('d')}, true)不起作用呢？
UPD #1
更新#1
Is there a way to capture window.onresize on something other that window?
有没有办法在其他窗口上捕获 window.onresize ？
UPD #2
更新 #2
And if windowis the only object that get resized then WHY this works? o_O
如果window是唯一被调整大小的对象，那么为什么这有效？o_o
document.body.onresize = function(){console.log('a')}
回答by sakhunzai
"Any element can be given an onresize attribute, however only the window object has a resize event. Resizing other elements (say by modifying the width or height of an img element using script) will not raise a resize event."
“任何元素都可以被赋予一个onresize 属性，但是只有 window 对象有一个resize 事件。调整其他元素的大小（比如通过使用脚本修改 img 元素的宽度或高度）不会引发 resize 事件。”
please check 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;
Edits:If you stop events bubble document.body.onresize event will not be invoked: e.g
编辑：如果您停止事件气泡 document.body.onresize 事件将不会被调用：例如
function winResize(e){
console.log('window reiszed',e);
e.stopImmediatePropagation()
}
*Update: *
*更新：*
a) First thing is to understand is that resize event will be propagated from
window > document > bodyand if you have defined resize event on all of the above nodes and othersthe event will be propagated down and each one will be invoked
a）首先要了解的是，调整大小事件将从中传播
window > document > body，如果您在上述所有节点和其他节点上定义了调整大小事件，则事件将向下传播，并且每个节点都将被调用
b) when you ask difference b/w window.resizeand [body/document].onresizeis that
window.resizeevent is standard event defined in html4 specification and [body/document].onresize was available as nonstandard event (some browsers implemented but not all)
But latter onresize event is added in HTML5 specificationto body.
b) 当您询问差异 b/wwindow.resize并且[body/document].onresize该
window.resize事件是 html4 规范中定义的标准事件并且 [body/document].onresize 可用作非标准事件时（某些浏览器已实现但不是全部）但后者 onresize 事件已添加到HTML5 规范中到身体。
Just to satisfy yourself go to w3c validation siteand validated following html using Doctype
html 4.01 strict, you will see it will complain at onresize attribute :
只是为了让自己满意，请转到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) conclusion.window.addEventListener() comes with Dom level 2 event specifications only add events listern for eventsspecified in that specification( Dom level 3 event also support this) , read DOM levels.& this
c)结论。window.addEventListener() 带有 Dom 级别 2 事件规范，仅为该规范中指定的事件添加事件监听（Dom 级别 3 事件也支持此），读取 DOM 级别。&这个
回答by Chandra Sekhar Walajapet
You should actually look at the anatomy of the browser and see which object has which events, window has a resize event which triggers when there is change in the size of the window, a document resides inside a window object its like window->document->elementsand each in the hierarchy has thier own events.
您实际上应该查看浏览器的解剖结构并查看哪个对象具有哪些事件，窗口具有在窗口大小发生变化时触发的调整大小事件，文档驻留在窗口对象中，window->document->elements并且每个对象都在层次结构中有他们自己的事件。
回答by Joe L.
This one worked for me, using jQuery:
这个对我有用，使用 jQuery：
var windowWidth = $(window).width();
var windowHeight = $(window).height()
window.addEventListener("orientationchange", function() {
windowWidth = $(window).width();
windowHeight = $(window).height();
}, false);
