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 相关文章推荐
关于js类的定义
Jun 28 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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
摩卡咖啡
2021/03/03 咖啡文化
php使用curl打开https网站的方法
2015/06/17 PHP
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
详解python3中的真值测试
2018/08/13 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
小学生期末评语大全
2014/04/21 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
初婚未育证明样本
2015/06/18 职场文书
边城读书笔记
2015/06/29 职场文书
大学生读书笔记大全
2015/07/01 职场文书
教师培训学习心得体会
2016/01/21 职场文书