It is very strange that it work(ed) for you however whatsoever, because
it shouldn't.
Consider the small test case at the bottom. The comments are following:
1) Firefox fires 'onload' AFTER you ended up with resizing. It has
sense, because not any resize is really resize: what if you returned
the window to the exactly same size as before dragging? Take the resize
event on the capturing phase (while it's going down), and you are sort
of ok. BUT SEE THE POINT 3 !
2) IE 6.0 is badly broken. It generates from 2 up to 4 resize events AT
THE BEGINNING of each drag, depending from what side are you dragging
(it must be correlated to the scrollbars redraw, which causes separate
resize bubbles). Also it fails to set event properties (all undefined),
so you cannot trace bubbles history.
3) A huge lot of things may cause onresize event, including first page
load. So using this method you can easily fail in a dead loop, then one
onresize will cause another etc. etc. You should use real size check:
on init:
self.oldWidth = self.innerWidth
self.oldHeight=...
and later if self.oldWidth != self.innerWidth etc.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
var isDOM = window.addEventListener;
function init() {
if (isDOM) {
self.addEventListener('resize',test,true);
}
else {
self.attachEvent('onresize',test);
}
}
function test(e) {
var tmp = '';
if (isDOM) {
alert(e.target);
}
else {
for (prop in event) {tmp+=prop+'='+event.prop+'\n';}
alert(tmp);
}
}
window.onload=init;
</script>
</head>
<body bgcolor="#FFFFFF">
<p>Text</p>
</body>
</html
