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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
js实现动态显示时间效果
Mar 06 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 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遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python画图学习入门教程
2016/07/01 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
大型演出策划方案
2014/05/28 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
教师辞职信范文
2015/02/28 职场文书
高中班主任心得体会
2016/01/07 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Python中super().__init__()测试以及理解
2021/12/06 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android