Question

136

Did i miss something? HTML > Body - resize event

rated 0 times [ 139] [ 3] / answers: 1 / hits: 17860 / 12 Years ago, thu, january 3, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckenna

Add To Favorites

Follow

Total Points: 445

Total Questions: 109

Total Answers: 109

Location: Virgin Islands (U.S.)

Member since Sun, May 16, 2021

3 Years ago

mckenna questions

1 Laravel Livewire: Component in Foreach loop. Button Click shows on all items instead of Single item

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Jest mock aws-sdk ReferenceError: Cannot access before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 Nest js POST Request Not Recognizing DTO method

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How to use prop inside another prop as default value in vuejs

Thu, Mar 28, 19, 00:00, 5 Years ago

1 Javascript: Bind/unbind function behavior

Tue, Nov 27, 18, 00:00, 6 Years ago

View All

answered 12 Years ago ansleyk · 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