js 浏览器事件介绍
更新时间：2012年03月30日 23:37:47 作者：
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等
浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件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 事件 : \n\n";
msg+=" 浏览器载入了文档!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus 事件 : \n\n";
msg+=" 浏览器取得了焦点!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur 事件 : \n\n";
msg+=" 浏览器失去了焦点!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll 事件 : \n\n";
msg+=" 用户拖动了滚动条!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize 事件 : \n\n";
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 事件。
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件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 事件 : \n\n";
msg+=" 浏览器载入了文档!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus 事件 : \n\n";
msg+=" 浏览器取得了焦点!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur 事件 : \n\n";
msg+=" 浏览器失去了焦点!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll 事件 : \n\n";
msg+=" 用户拖动了滚动条!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize 事件 : \n\n";
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 事件。
相关文章
这篇文章主要为大家详细介绍了javascript实现鼠标拖尾特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
今天这篇文章对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript2011-10-10
这篇文章主要给大家介绍了Three.js基础学习之场景对象的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。2017-09-09
下面小编就为大家带来一篇javascript兼容性(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了js实现select下拉框选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。2016-11-11
这篇文章主要介绍了uniapp自定义验证码输入框隐藏光标,效果是点击输入框唤起键盘，蓝框就相当于input的光标，验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示持续1s然后清空数据，恢复原边框样式，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了JS中frameset框架弹出层实例代码 的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了完美的js图片轮换效果，包括左右移动和缓动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JS中的算法与数据结构之集合(Set),结合实例形式详细分析了javascript中集合的概念、原理、定义及相关操作技巧,需要的朋友可以参考下2019-08-08
最新评论