javascript - Did i miss something? HTML > Body - resize event

Question

Welcome To Ask or Share your Answers For Others

javascript - Did i miss something? HTML > Body - resize event

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Did i miss something? HTML > Body - resize event

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.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)

the problem is that this dosn't work. I really don't understand why? MB i missed something?

this works ( but ones again i want to use addEventListener )

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

So why document.addEventListener("resize", function(){console.log('d')}, true) doesn't work?

UPD #1

Is there a way to capture window.onresize on something other that window?

UPD #2

And if window is the only object that get resized then WHY this works? o_O

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:22:52+0000

Mozilla Docs says:

"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."

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

 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 > 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) 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.

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) 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

Categories

javascript - Did i miss something? HTML > Body - resize event

javascript - Did i miss something? HTML > Body - resize event

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags