浏览器事件window.onload、o…

最新推荐文章于 2023-03-23 17:34:22 发布
最新推荐文章于 2023-03-23 17:34:22 发布
阅读量985 收藏
点赞数 3
分类专栏： Web技术与标准
原文地址：浏览器事件window.onload、onfocus、onblur、onscroll和resize 作者：lilyxiao

<html>
<head>
<title>Sample Page!</title>
<script type="text/javascript">
<!--
window.onload = function(){
 var msg = "nwindow.onload 事件：nn";
 msg += "浏览器载入了文档：";
 alert(msg);
}
window.onfocus = function(){
 var msg = "nwindow.onfocus 事件：nn";
 msg += "浏览器取得了焦点：";
 alert(msg);
}
window.onblur = function(){
 var msg = "nwindow.onblur 事件：nn";
 msg += "浏览器失去焦点：";
 alert(msg);
}
window.onscroll = function(){
 var msg = "nwindow.onscroll 事件：nn";
 msg += "用户拖动了滚动条：";
 alert(msg);
}
window.resize = function(){
 var msg = "nwindow.resize 事件：nn";
 msg += "用户改变了窗口尺寸：";
 alert(msg);
}
-->
</script>
</head>
<body>
<br>
  <p>载入文档：</p>
  <p>取得焦点：</p>
  <p>失去焦点：</p>
  <p>拖动滚动条：</p>
  <p>变换尺寸：</p>
</body>
</html>

 

 

xosg
关注
专栏目录
解决window.onload延迟加载问题
weixin_30432179的博客
06-23 613
window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点...
页面加载的顺序和window.onload的作用
xixiruyiruyi的博客
12-08 5788
在说我们的主题之前，我们首先来看几段代码：   例子一、首先我们把script代码块放在head标签内，运行之后发现，点击按钮没有反应。 test1 var btn = document.getElementById("button"); btn.onclick =function(){ alert("你
window浏览器事件
qq_39115357的博客
07-04 473
window浏览器事件 load 加载 window.onload不仅是页面的加载，还在等待资源的加载 document.onload仅仅是页面的加载 document.onreload仅仅是页面的加载 resize 改变大小 scrool 滚动 hihstory历史记录 控制浏览器的“前进后退刷新”等于历史记录相关的功能 不方便在代码中临时测试，所以在浏览器中打开其他页面测试 属性： 历史记录的个数：history.length 方法： 前进：history.forword(); 后退：history
浏览器事件
ayex5953的博客
03-30 121
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。 浏览器事件浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。先考察如...
浏览器根对象window之事件
weixin_34321977的博客
02-12 285
1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimationiteration onwebkitanimationstart 2. [事件]过渡 ontransitionend事件在 CSS 完成过渡后触发。 onwebkitt...
【前端学习】前端学习第十八天：BOM浏览器对象模型中window对象常见事件
qq_49916504的博客
04-07 381
一、BOM概述： BOM，全称为浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window，window对象是浏览器的顶级对象。BOM是包含DOM的。 二、window对象的常见事件： 1、窗口加载事件 window.onload:页面加载事件，当文档内容完全加载完成时会触发该事件； 2、调整窗口大小 window.onresize=function(){...}:调整窗口大小事件，需注意的是，window.innerWidth()是当前屏幕的宽度； 三、wind
详解浏览器的事件系统
杏子
05-28 1027
详解浏览器的事件模型一、事件二、事件类型三、注册事件四、事件流 一、事件 事件类型和事件目标 二、事件类型 表单时间 window事件 鼠标事件 键盘事件 H5 新增事件 移动设备事件 三、注册事件 对目标对象或文档元素添加属性 通过 addEventListener() 事件注册 调用顺序 通过设置属性的优先调用； 使用 addEventListener 注册的事件按照注册顺序调用 使...
java获取浏览器window对象_JS window对象详解
weixin_33539834的博客
02-26 1666
window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。全局作用域在客户端浏览器中，window 对象是访问 BOM 的接口，如引用 document 对象的 document 属性，引用自身的 window 和 self 属性等。...
window.open()方法（弹出层）
张亚运的专栏
12-23 5471
1, 最基本的弹出窗口代码    window.open('page.html'); 2, 经过设置后的弹出窗口    window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, locat
页面中body onload 和 [removed] 冲突的问题的解决
09-05
这时，`body.onload` 和 `window.onload` 事件就显得尤为重要。然而，当这两个事件同时存在时，可能会出现冲突，导致代码执行顺序混乱或只执行其中一个事件。本文将详细探讨这个问题，并提供解决方案。 `body....
ie中 body onload 和 window onload 解决法案
07-23
有需要的朋友是最好的参考资料。希望有所帮助！
浏览器事件对象详解
sysuzhyupeng的博客
04-06 1962
客户端js程序采用了异步事件驱动模型，每当我们点击或敲击键盘时，浏览器就会产生事件，如果js程序关注特定类型的事件，那么它可以注册当这类事件发生时要调用的一个或多个处理函数。这种风格并不止应用于web编程，所有使用图形用户界面的应用程序都采用了它。它们等待事件发生，然后它们响应。 事件类型(event type)是一个用来说明发生什么类型事件的字符串，例如mouseover表示用户移动鼠标，key
window事件
m0_68340255的博客
03-23 116
前端
BOM（一）：window对象的常见事件（页面加载、调整窗口大小）、定时器
weixin_42044763的博客
07-07 1119
BOM（Browser Object Model）:浏览器对象模型，主要是和浏览器窗口交互 BOM包含了DOM 使用window.load添加页面加载事件，这样即使标签在script代码的下面也是可以执行的，也就是load会等页面内容加载完毕后（包括DOM，图片，flash，css等）再去走window.load里面的代码。但是这个不能重复添加，重复添加会被覆盖，这个之前讲过 （2）使用方法监听注册事件 （3）DOMContentLoaded加载完DOM就显示 DOMContentLoaded是DOM加
兼容各版本浏览器的关闭事件window.close
弑忆 的专栏
04-01 1251
top.window.opener = null;        top.window.open('','_self','');        top.window.close();
学习笔记18_window对象的常见事件
ankh的博客
07-10 406
是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。注意：有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数window.onload 传统注册事件方式，只能执行。如果有多个，会以最后一个window.onload为准如果使用addEventListener 则没有限制 加载完DOM 接收两个参数：DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样
浏览器 onload bug 解决方案
zjhiphop2006的专栏
09-05 499
<br />// Dean Edwards/Matthias Miller/John Resig function init() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; /
javascript中的window.open()被浏览器拦截
weixin_30345055的博客
08-25 93
最近做项目的时候，点击事件的时候遇到了window .open()被浏览器拦截的情况，虽然在自己的开发环境中都能正常使用，但是放在测试环境中window.open()就是不能使用， 后来经过测试，单纯的运行window.open()可以打开新页面，但是放在ajax或者一段异步的代码中，就回出现浏览器拦截问题，后来经过反复测试，最终得到window.open()在同步的代码中是显示...
window.onload = function(){ var oList = document.getElementById("List"); var oCSS = document.getElementById("css"); var oBtn = document.getElementById("btns").children; var iW = 40; var shtml=""; var scss=""; var Lilength = oList.clientWidth / iW; var iZindex= 0; var iNow = 0; var aLi; var aLi = oList.children; for (var i=0;i<Lilength;i++ ) { i>Lilength/2?iZindex--:iZindex++; shtml+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></li>'; scss += "#List li:nth-child("+(i+1)+") a{background-position:-"+(iW*i)+"px 0}"; scss += "#List li:nth-child("+(i+1)+"){z-index:"+iZindex+"}"; } oList.innerHTML = shtml; oCSS.innerHTML += scss; for (var i=0;i<oBtn.length;i++ ) { oBtn[i].index = i; oBtn[i].onclick = function(){ oBtn[iNow].className = ""; for (var i=0;i<aLi.length;i++ ) { aLi[i].style.transition = "0.8s "+i*50+"ms"; aLi[i].style.WebkitTransform="rotateX(-"+(this.index)*90+"deg)"; } iNow = this.index; oBtn[iNow].className = "active"; } } }
最新发布
06-09
这是一个用原生 JavaScript 实现的 3D 轮播图的代码。该代码在页面加载完成后会执行一...需要注意的是，该代码使用了一些 CSS3 新特性，如 `transform` 和 `transition` 属性，因此在低版本浏览器中可能无法正常显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值