onresize事件

来源：互联网发布：专题片男生配音软件编辑：程序博客网时间：2024/05/02 05:45

onresize的定义方式
一、直接在html中定义
    如<body onresize="doResize()"/>
二、直接给onresize赋值
    可以给window和body的onresize赋值
    如window.onresize=function(){},document.body.onresize=function(){}
三、使用事件监听
    只对window有作用
    如window.addEventListener("resize",fn);
说明：
    1、直接给onresize赋值会覆盖在html中定义。
    2、直接给onresize赋值，window,body只有一个起作用，后定义的会覆盖先定义的
    3、事件监听只对window有效，可以其它方式同时触发。

Java代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> new document </title>
<style>html,body{border:5px solid #06F;}</style>
</head>
<body onresize="a();">
<div id="show">0</div>
<div id="div" style="border:1px solid #000"></div>
<textarea id="re" cols="30" rows="6"></textarea>
<script>
var re=document.getElementById("re");
//同时定义body与window的onresize
//ff下window上的启作用，ff下，用js定义在body上不启作用
//ie chrome opra下根据body与window定义的先后顺序后定义的覆盖先定义的
//在任意浏览器下，js定义的会覆盖在标签上直接定义的onresize事件。
document.body.onresize=function () {
re.value+='this is body js resize.\n';
}
window.onresize=function () {
re.value+='this is window resize.\n';
}
//使用listener监听事件只能在window上，在body上无效。
bind(document.body,"resize",function(){
re.value+='this is body resize in litener.\n';
});
bind(window,"resize",function(){
re.value+='this is window resize in litener.\n';
});
function a() {
re.value+=("this is body html resize\n");
}
//任意html元素，改变内容，是否触发onresize，则只有ie下启作用
var i = 0;
var div=document.getElementById("div");
var show=document.getElementById("show");
div.onresize = function(){ show.innerHTML = ++i; }
setTimeout('div.innerHTML="test"',1000)
setTimeout('div.style.height="50px"',2000) ;
function bind(el,eventName,fn) {
if (window.addEventListener) {
el.addEventListener(eventName, fn,false);
} else if (window.attachEvent) {
el.attachEvent("on" + eventName, fn);
}
}
</script>
</body>
</html>