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 相关文章推荐
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
js如何打印object对象
Oct 16 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Vue异步加载about组件
Oct 31 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
微信小程序实现图片压缩
Dec 03 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
Javascript的闭包
2009/12/31 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python中自定义函数的教程
2015/04/27 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
一篇.NET面试题
2014/09/29 面试题
人力资源经理自我评价
2014/01/04 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
《影子》教学反思
2014/02/21 职场文书
技校毕业生自荐书
2014/05/23 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
四风查摆剖析材料
2014/10/10 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
浅谈python数据类型及其操作
2021/05/25 Python