JavaScript页面加载事件实例讲解


Posted in Javascript onSeptember 01, 2019

一、onload 加载事件

onload 是 window 对象的一个事件,也可以省略 window 直接使用。

常用方式:

<head><script>
  windown.onload = function() {
   // 方法体
  }
</script><head>

这个事件是等待页面加载完成之后,再执行 <script> 标签的内容。即页面上所有的元素创建完毕,并且引用的外部资源下载完毕(js,css,图片)

注意:该事件相比于在 <body> 中的 <script> 标签中的内容执行速度慢,因为 onload 需要等页面加载完毕才执行,而其他的当页面上的元素创建完毕后就会执行。

onload 不仅仅可以应用于 window,也可以用于其他的一些标签。

二、onunload 卸载事件

onunload 是卸载事件,当页面卸载的时候执行。

Demo:

onunload = function () {
   alert('欢迎下次再来');   // 报错: Blocked alert('欢迎下次再来') during unload.
  console.log('bye bye');
}

当我们按 F5重新加载页面会发现 alert 对话框会报错,并不会执行,这是因为 onunload 事件中所有的对话框都无法使用,window 对象被冻结了。

上面的知识点很简单,希望能够给大家提供到帮助同时感谢大家对三水点靠木的支持。+

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
javascript jQuery插件练习
Dec 24 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JavaScript实现随机点名程序
Mar 25 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
四查四看剖析材料
2014/02/14 职场文书
企业党员一句话承诺
2014/05/30 职场文书
纪律教育月活动总结
2014/08/26 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
个人租房协议书范本
2014/09/30 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS