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扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
JS实现留言板功能
Jun 17 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
JavaScript字符串转数字的简单实现方法
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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python实现QQ批量登录功能
2019/06/19 Python
django基础学习之send_mail功能
2019/08/07 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python求凸包及多边形面积教程
2020/04/12 Python
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
深圳茁壮笔试题
2015/05/28 面试题
酒店工程部岗位职责
2015/02/12 职场文书
驻村工作简报
2015/07/20 职场文书
总经理聘用协议书
2015/09/21 职场文书
六五普法学习心得体会
2016/01/21 职场文书