JavaScript窗口事件
- JavaScript
- 2024-08-19
- 231热度
- 0评论
窗口事件主要由Window对象或Image 对象触发，Window对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。Image 对象表示浏览器加载的图片。
常用的窗口事件
常用的窗口事件如下表所示：
| 事件类型 | 描述 | 备注 |
| onload | 网页或图片加载完成后触发该事件 | （1） |
| onunload | 用户离开网页时触发该事件 | （2） |
| onscroll | 网页内容被滚动时触发该事件 | （3） |
| onresize | 窗口或框架尺寸调整时触发该事件 | （4） |
| onerror | 网页内容或图像加载失败时触发该事件 | （5） |
备注（1）
onload 事件会在网页或图像加载完成后被触发，onload事件可以用于网页加载完成后的初始化工作，例如：DOM对象绑定事件，操作DOM对象等操作。
有两种方式来处理onload事件。
一种方式将事件处理函数绑定到winodw对象的onload属性：
window.onload=function (){
// 函数代码
}
一种方式将事件处理函数绑定到<body>元素的onload属性上：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function init(){
alert("页面加载完成")
}
</script>
</head>
<body onload="init()">
<p><input type="button" id="id_mul" value="乘法"/></p>
</boyd>
<html>
备注（2）
onunload事件会在用户点击链接、提交表单或者关闭浏览器窗口等操作时被触发，若用户刷新页面也会触发onunload事件。
事件绑定方法同onload事件相同。
事件的触发与浏览器相关，IE, Firefox, 和 Safari 支持 onunload 事件, 但 Chrome 或者 Opera 不支持该事件。Safari 在刷新页面、页面跳转，关闭浏览器都会触发该事件。其它浏览器当用户关闭浏览器时，都不会触发该事件。
备注（3）
onscroll事件会在网页内容或网页元素滚动时被触发。
若要监听网页内容滚动事件，可以将事件处理函数绑定到window对象的onscroll属性，或绑定到<body>元素的onscroll属性。
若要监听网页元素滚动事件，可以将事件处理函数绑定到网页元素的onscroll属性。例如：
<div onscroll="myFunction()">这是DIV区域</div>
myFunction()函数将处理div元素的滚动事件。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
count = 1;
function scroll_function(){
document.getElementById("info").value = "第" + count + "次触发滚动事件";
count += 1
}
</script>
<style>
.testdiv{
border: 1px solid #000000;
width: 300px;
height: 100px;
overflow: scroll;
margin-top:100px;
}
</style>
</head>
<body onload="init()">
<div class="testdiv" onscroll="scroll_function()">
不以物喜，不以己悲。居庙堂之高则忧其民，处江湖之远则忧其君。
是进亦忧，退亦忧。然则何时而乐耶？
其必曰：先天下之忧而忧，后天下之乐而乐欤！
</div>
<p>滚动 <input id="info"/></p>
</boyd>
<html>
备注（4）
onresize事件会在窗口或框架调整尺寸时被触发。例如：当用户调整浏览器窗口尺寸时，该事件被触发。支持该事件的对象为Window对象。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onresize = function() {
alert("窗口尺寸被调整")
}
</script>
</head>
<body>
</body>
<html>
执行上面的案例代码，当用户调整浏览器窗口尺寸时，会弹出对话框，提示用户“窗口尺寸被调整”。
备注（5）
onerror事件会在网页内容或图像加载过程中发生错误时被触发。例如：当一个图片加载失败时，该事件被触发。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function process_error() {
alert("图片加载失败")
}
</script>
</head>
<body>
<img src="imagename.jpg" onerror="process_error()" />
</body>
<html>
执行上面的案例代码，浏览器会弹出对话框，提示用户“图片加载失败”，这是因为浏览器找不到imagename.jpg图片文件，触发onerror事件。
