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 validation插件表单验证的一个例子
Mar 03 Javascript
用js实现in_array的方法
Nov 05 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
js实现百度淘宝搜索功能
Feb 17 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
js控制table合并具体实现
2014/02/20 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
财务部总监岗位职责
2014/03/12 职场文书
小学老师寄语大全
2014/04/04 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers