关闭

浏览器事件

141人阅读 评论(0) 收藏 举报
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。

浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件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 所示。

图 3.2 载入文档时触发window.load 事件
当把焦点给该文档页面时,触发 window.onfocus 事件,弹出警告框如图3.3 所示。

图 3.3 文档取得焦点时触发window.onfocus 事件
当该页面失去焦点时,触发 window.blur 事件,弹出警告框如图3.4 所示。

图3.4 文档失去焦点时触发window.onblur 事件
当用户拖动滚动条时,触发 window.onscroll 事件,弹出警告框如图3.5 所示。

图 3.5 拖动滚动条,触发window.onscroll 事件
当用户改变文档页面大小时,触发 window.onresize 事件,弹出警告框如图3.6 所示。

图 3.6 改变文档页面大小,触发window.onresize 事件
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合,在页面的交互性、动态性方面使用较为广泛。
注意:Netscape Navigator 4 支持window.onmove 事件,该事件在当前浏览器窗口被用户移动时触发,主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。

0
0
查看评论

JQuery - 点击浏览器后退键时发出警告

jQuery(document).ready(function ($) {                  ...
  • jameszhou
  • jameszhou
  • 2013-11-07 16:48
  • 12291

js获取浏览器返回按钮事件

前面要加上jquery 比如 監聽事件 jQuery(document).ready(function($) { if (window.history && window.history.pushState) { $(window).on('pops...
  • genziisme
  • genziisme
  • 2017-01-13 09:34
  • 10501

js 浏览器滚动事件

<html> <head> <script type="text/javascript" src="jquery.js"></script> <style type="te...
  • lishaojun0115
  • lishaojun0115
  • 2016-01-04 16:22
  • 2849

监听浏览器回退事件

Dom: Js: window.onload=function(){ addHistoryEntity(); detectBack(); } //新增一条浏览器浏览历史记录 function addHistoryEntity(){ if(history.pus...
  • xuanwuziyou
  • xuanwuziyou
  • 2017-07-27 16:14
  • 325

js获取浏览器窗体最大化事件

<!--function ReSet() {document.getElementById("Flash").width=document.body.clientWidth;document.getElementById("Flash").height=...
  • shihuaxian
  • shihuaxian
  • 2009-10-12 09:36
  • 7591

自定义浏览器事件,模拟浏览器事件流

简述我认为,事件是我们前端最为熟悉的编程模式,在前端开发中能接触太多太多,而且相对而言,事件是一种相对容易理解,逻辑性高的的模式,对于优化组件/插件的逻辑是一个很好的应用模式。这文章主要是用JavaScript实现3级dom事件机制,后面的更新会涉及应用倒组件开发当中。
  • hulk_oh
  • hulk_oh
  • 2016-10-23 16:07
  • 411

捕获浏览器关闭、刷新事件,在窗体关闭时从全局对象里移除当前用户

//以下是主页面的js代码,转的 //页面即将关闭事件 function window.onbeforeunload() { //用户点击浏览器右上角关闭按钮或是按alt+F4关闭 if(event.clientX &...
  • qianliangjiexialing
  • qianliangjiexialing
  • 2016-03-11 14:41
  • 894

JS捕获关闭浏览器事件

1、window.onbeforeunload()函数主要是用于捕获关闭浏览器事件(包括刷新); 2、window.onunload()函数主要是执行关闭游览器后的动作; 举例: window.onbeforeunload = function() { var bln= confirm(...
  • victor16345
  • victor16345
  • 2012-06-17 10:59
  • 1174

js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge,Chrome和Firefox)

监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge,Chrome和Firefox)
  • qq_38627581
  • qq_38627581
  • 2017-12-20 16:02
  • 607

浅谈IE事件处理与其他浏览器的差异

1、触发事件对象(触发事件的元素被认为是目标target): (1)IE下,event对象有srcElement属性,但没有target属性。 (2)Firefox下,event对象有target属性,但没有srcElement属性。 (3)Chrome下,event对象同时具有target和src...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-05 13:52
  • 628
    个人资料
    • 访问:32181次
    • 积分:749
    • 等级:
    • 排名:千里之外
    • 原创:63篇
    • 转载:11篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论