问题描述
添加调整大小事件(以侦听窗口大小更改)的常用方法是:
Usual way to add resize event (to listen window size changed) is this:
//works just fine
window.addEventListener("resize", function(){console.log('w')}, true)
但是我想将此事件处理程序添加到document.body甚至更好地添加到document(不要问我为什么，但是我不能使用window )
but I want to add this event handler to document.body or even better to document (don't ask me why, but i can't use 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)
问题是这不起作用.我真的不明白为什么? MB我错过了什么?
the problem is that this dosn't work. I really don't understand why? MB i missed something?
这有效(但我想再次使用addEventListener)
this works ( but ones again i want to use addEventListener )
document.body.onresize = function(){console.log('a')}
那为什么document.addEventListener("resize", function(){console.log('d')}, true)不起作用?
So why document.addEventListener("resize", function(){console.log('d')}, true) doesn't work?
UPD#1
有没有一种方法可以捕获window.onresize在其他窗口上的大小?
Is there a way to capture window.onresize on something other that window?
UPD#2
如果window是唯一可以调整大小的对象，那么为什么这样做有效? o_O
And if window is the only object that get resized then WHY this works? o_O
document.body.onresize = function(){console.log('a')}
推荐答案
可以向任何元素赋予 onresize属性，但是只有窗口对象具有 resize事件.调整其他元素的大小(例如，通过修改使用脚本的img元素)将不会引发调整大小事件."
"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."
请检查工作示例
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事件将不会被调用:例如
Edits: If you stop events bubble document.body.onresize event will not be invoked: e.g
function winResize(e){
console.log('window reiszed',e);
e.stopImmediatePropagation()
}
* 更新:*
a)首先要了解的是，调整大小事件将从 window > document > body 以及是否已定义大小调整事件在上述所有节点和其他上，事件将向下传播，并且将调用每个事件
a) First thing is to understand is that resize event will be propagated from window > document > body and if you have defined resize event on all of the above nodes and others the event will be propagated down and each one will be invoked
b)当您要求差异b/w window.resize和[body/document].onresize是 window.resize事件是html4规范中定义的标准事件，[body/document] .onresize可作为非标准事件使用(某些浏览器已实现，但不是全部) 但是后面的onresize事件已在 HTML5规范中添加到正文.
b) when you ask difference b/w window.resize and [body/document].onresize is that window.resize event 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 specification to body.
为了让自己满意，请访问 w3c验证网站，并在html之后使用Doctype进行验证 html 4.01 strict，您将看到它会在onresize属性上抱怨:
Just to satisfy yourself go to w3c validation site and validated following html using Doctype html 4.01 strict , you will see it will complain at onresize attribute :
<!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级别. & 此
c) conclusion. window.addEventListener() comes with Dom level 2 event specifications only add events listern for events specified in that specification( Dom level 3 event also support this) , read DOM levels. & this
这篇关于我错过了什么? HTML>身体-调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！