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 相关文章推荐
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Javascript动画效果(1)
Oct 11 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
laravel 数据验证规则详解
2019/10/23 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery知识点整理
2015/01/30 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
react中hook介绍以及使用教程
2020/12/11 Javascript
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python机器学习实现决策树
2019/11/11 Python
python文件读取失败怎么处理
2020/06/23 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
吴仁宝观后感
2015/06/09 职场文书
2015军训通讯稿大全
2015/07/18 职场文书