Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
378 views
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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...