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使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
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中ob_start()函数的用法
2013/06/24 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
任命通知范文
2015/04/21 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python