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对html元素取值与赋值的方法
Nov 20 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
JS中数据结构之栈
Jan 01 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
Vue操作Storage本地化存储
Apr 29 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
使用dump函数,给php加断点测试
2013/06/25 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
浅谈js中的闭包
2015/03/16 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python三级菜单的实例
2017/09/13 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python 实现数组相减示例
2019/12/27 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
python判断变量是否为列表的方法
2020/09/17 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
供货协议书范本
2014/04/22 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技