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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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+MySql编写聊天室
2006/10/09 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
微信小程序生成二维码的示例代码
2019/03/29 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
javascript实现固定侧边栏
2021/02/09 Javascript
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
python压包的概念及实例详解
2021/02/17 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
水务局局长岗位职责
2013/11/28 职场文书
仓库管理制度
2014/01/21 职场文书
大学军训感言1000字
2014/02/25 职场文书
秋天的雨教学反思
2014/04/27 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
技术入股合作协议书
2014/10/07 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL