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 相关文章推荐
关于jQuery中的end()使用方法
Jul 10 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue-cli设置publicPath小记
Apr 14 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查看session内容的函数
2008/08/27 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
js实现下一页页码效果
2017/03/07 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
angularjs实现猜数字大小功能
2020/05/20 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
建议书标准格式
2014/03/12 职场文书
剪彩仪式主持词
2014/03/19 职场文书
科学发展观演讲稿
2014/09/11 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
React自定义hook的方法
2022/06/25 Javascript
详解SQL报错盲注
2022/07/23 SQL Server