js 浏览器事件介绍


Posted in Javascript onMarch 30, 2012

浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件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 所示。
js 浏览器事件介绍
图 3.2 载入文档时触发window.load 事件
当把焦点给该文档页面时,触发 window.onfocus 事件,弹出警告框如图3.3 所示。
js 浏览器事件介绍
图 3.3 文档取得焦点时触发window.onfocus 事件
当该页面失去焦点时,触发 window.blur 事件,弹出警告框如图3.4 所示。
js 浏览器事件介绍
图3.4 文档失去焦点时触发window.onblur 事件
当用户拖动滚动条时,触发 window.onscroll 事件,弹出警告框如图3.5 所示。
js 浏览器事件介绍
图 3.5 拖动滚动条,触发window.onscroll 事件
当用户改变文档页面大小时,触发 window.onresize 事件,弹出警告框如图3.6 所示。
js 浏览器事件介绍
图 3.6 改变文档页面大小,触发window.onresize 事件
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合,在页面的交互性、动态性方面使用较为广泛。
注意:Netscape Navigator 4 支持window.onmove 事件,该事件在当前浏览器窗口被用户移动时触发,主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。
Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
js中eval详解
Mar 30 #Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 #Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 #Javascript
jQuery 自定义函数写法分享
Mar 30 #Javascript
一个JQuery操作Table的代码分享
Mar 30 #Javascript
javascript工具库代码
Mar 29 #Javascript
Web开发之JavaScript
Mar 29 #Javascript
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
开业庆典答谢词
2014/01/18 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
教师个人教学总结
2015/02/11 职场文书
个人年底工作总结
2015/03/10 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle