js 浏览器事件介绍

201 阅读 0 评论 133 点赞

我是靠谱客的博主冷艳老虎，最近开发中收集的这篇文章主要介绍js 浏览器事件介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。

先考察如下的代码：

复制代码代码如下:

 
//源程序3.1 
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" 
"http://www.w3.org/TR/REC-html140/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Sample Page!</title> 
<script type="text/javascript"> 
<!-- 
window.onload = function () 
{ 
var msg="nwindow.load 事件 : nn"; 
msg+=" 浏览器载入了文档!"; 
alert(msg); 
} 
window.onfocus = function () 
{ 
var msg="nwindow.onfocus 事件 : nn"; 
msg+=" 浏览器取得了焦点!"; 
alert(msg); 
} 
window.onblur = function () 
{ 
var msg="nwindow.onblur 事件 : nn"; 
msg+=" 浏览器失去了焦点!"; 
alert(msg); 
} 
window.onscroll = function () 
{ 
var msg="nwindow.onscroll 事件 : nn"; 
msg+=" 用户拖动了滚动条!"; 
alert(msg); 
} 
window.onresize = function () 
{ 
var msg="nwindow.onresize 事件 : nn"; 
msg+=" 用户改变了窗口尺寸!"; 
alert(msg); 
} 
//--> 
</script> 
body> 
<br> 
<p>载入文档:</p> 
<p>取得焦点:</p> 
<p>失去焦点:</p> 
<p>拖动滚动条:</p> 
<p>变换尺寸:</p> 
</body> 
</html> 

将上述源程序保存为*.html（或*.htm）文档，双击该文档后系统调用默认的浏览器进行浏览。
当载入该文档时，触发 window.load 事件，弹出警告框如图3.2 所示。

图 3.2 载入文档时触发window.load 事件
当把焦点给该文档页面时，触发 window.onfocus 事件，弹出警告框如图3.3 所示。

图 3.3 文档取得焦点时触发window.onfocus 事件
当该页面失去焦点时，触发 window.blur 事件，弹出警告框如图3.4 所示。

图3.4 文档失去焦点时触发window.onblur 事件
当用户拖动滚动条时，触发 window.onscroll 事件，弹出警告框如图3.5 所示。

图 3.5 拖动滚动条，触发window.onscroll 事件
当用户改变文档页面大小时，触发 window.onresize 事件，弹出警告框如图3.6 所示。

图 3.6 改变文档页面大小，触发window.onresize 事件
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合，在页面的交互性、动态性方面使用较为广泛。
注意：Netscape Navigator 4 支持window.onmove 事件，该事件在当前浏览器窗口被用户移动时触发，主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。