JavaScript onresize 事件
当浏览器窗口（显示web文档的窗口）或 HTML 对象被改变大小时会触发 onresize 事件。
支持该事件的 HTML 标签
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <p>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象
window
onresize 实例
下面的例子演示了当浏览器窗口被调整大小时，弹出一个消息提示框：
<html>
<body onresize="alert('浏览器窗口已被改变！')">
</body>
</html>提示
在 IE 和 Opera 浏览器中，只要窗口的边框被改变一个像素，onresize事件就会被触发；而在 Mozilla Firefox 等其他浏览器中，只在停止对窗口的大小改变时才触发 onresize 事件。显然后者比较接近实际想要的效果，下面的例子利用 setTimeout() 方法，在 IE 浏览器中模拟实现这个效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html>
<script type="text/javascript">
var resizeTimer = null;
alert("宽度："+document.documentElement.clientWidth + " 高度："+document.documentElement.clientHeight);
function doResize(){
alert("新宽度："+document.documentElement.clientWidth + " 新高度："+document.documentElement.cli
entHeight);
resizeTimer = null;
}
window.onresize = function(){
if( resizeTimer == null) {
resizeTimer = setTimeout("doResize()",1000);
}
}
</script>
<body>
</body>
</html>例子语法解释
- 原理为绑定 window.onresize 事件，通过 setTimeout() 方法延缓执行 onresize 事件
- document.documentElement.clientWidth 为获取文档显示窗口宽度尺寸（像素）
- setTimeout("doResize()",1000) 表示延迟1秒（1000毫秒）执行 doResize 函数
- 必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度
本章节内容共分 22 部分：
- JavaScript 事件
- JavaScript onclick 事件：鼠标点击页面某个对象
- JavaScript ondblclick 事件：鼠标双击页面某个对象
- JavaScript onmousedown 事件：鼠标任何一个按键被按下
- JavaScript onmouseup 事件：鼠标任何一个按键被松开
- JavaScript onmouseover 事件与 onmouseout 事件：鼠标指针移动到对象上或离开对象
- JavaScript onkeydown 事件：键盘上某个按键被按下
- JavaScript onkeypress 事件：按下或按住一个键盘按键
- JavaScript onkeyup 事件：键盘按键被松开
- JavaScript onblur 事件：页面元素失去焦点
- JavaScript onfocus 事件：页面元素获得焦点
- JavaScript onchange 事件：表单文本域或选择域发生改变
- JavaScript onsubmit 事件：表单被提交
- JavaScript onreset 事件：表单被重置
- JavaScript onload 事件：页面或图像加载完成后
- JavaScript onunload 事件：关闭页面或页面被改变为其他页面
- JavaScript onerror 事件：加载页面或图像时发生错误
- JavaScript onresize 事件：当浏览器窗口或 HTML 对象改变大小
- JavaScript onscroll 事件：滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
- JavaScript onselect 事件：文本框中的文本被选中
- JavaScript oncopy 事件：文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
- JavaScript oncut 事件与 onpaste 事件：文本域文本被剪切或粘贴（禁止粘贴实例）
