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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
javascript history对象详解
Feb 09 Javascript
jquery实现轮播图效果
Feb 13 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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
第十一节--重载
2006/11/16 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Python冲顶大会 快来答题!
2018/01/17 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
校园文化建设方案
2014/02/03 职场文书
实习单位推荐信
2015/03/27 职场文书
小学教师见习总结
2015/06/23 职场文书
公司员工奖惩制度
2015/08/04 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏