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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
js实现全选和全不选功能
Jul 28 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP中使用curl入门教程
2015/07/02 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python自动生产表情包
2017/03/17 Python
python感知机实现代码
2019/01/18 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
教师评优事迹材料
2014/01/10 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
企业百日安全活动总结
2015/05/07 职场文书
绿里奇迹观后感
2015/06/15 职场文书
公司酒会主持词
2015/07/02 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
goland 设置project gopath的操作
2021/05/06 Golang