Did i miss something? HTML Body - resize event

Question

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

sakhunzai · Accepted Answer

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

Did i miss something? HTML > Body - resize event

Tags:

javascript

html

obenjiro

1 Answers

sakhunzai

Recent Activity

Donate For Us