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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 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开发文件系统实例讲解
2006/10/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php之curl设置超时实例
2014/11/03 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
安全生产活动月方案
2014/03/09 职场文书
中专生自荐信
2014/06/25 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
劳资员岗位职责
2015/02/13 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers