gpt4 book ai didi

javascript - 我错过了什么? HTML > 主体 - 调整大小事件

转载 作者:太空狗 更新时间:2023-10-29 13:43:39 27 4
gpt4 key购买 nike

添加调整大小事件(监听窗口大小改变)的通常方法是这样的:

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

最佳答案

Mozilla Docs says:

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

请查看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;

编辑: 如果你停止事件气泡 document.body.onresize 事件将不会被调用:例如

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

*更新:*

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

b) 当你询问黑白 window.resize[body/document].onresize 的区别时 window.resize 事件是 html4 规范中定义的标准事件,[body/document].onresize 可用作非标准事件(一些浏览器实现但不是全部) 但是在 HTML5 specification 中添加了后一个 onresize 事件到 body 。

为了满足自己去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. & this

关于javascript - 我错过了什么? HTML > 主体 - 调整大小事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14137629/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com