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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
js实现烟花特效
Mar 02 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
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 mysql索引问题
2008/06/07 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
angular4自定义组件详解
2017/09/28 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python障碍式期权定价公式
2019/07/19 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
python urllib和urllib3知识点总结
2021/02/08 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
书香校园活动方案
2014/02/28 职场文书
挂牌仪式主持词
2014/03/20 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2015入党自荐书范文
2015/03/05 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
新闻稿件写作范文
2015/07/18 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python