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 01 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python中的asyncio代码详解
2019/06/10 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python shutil模块用法实例分析
2019/10/02 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python 实现性别识别
2020/11/21 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
求职自荐信的格式
2014/04/07 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
商业项目策划方案
2014/06/05 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
病假证明模板
2015/06/19 职场文书