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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
JS如何实现基于websocket的多端桥接平台
May 14 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里的JS打印函数
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
竞选班长自荐书范文
2014/03/09 职场文书
政治表现评语
2014/05/04 职场文书
工作求职自荐信
2014/06/13 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书