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 实现的自定义对话框
Mar 24 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
原生JavaScript实现换肤
Feb 19 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和ACCESS写聊天室(二)
2006/10/09 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
使用js画图之画切线
2015/01/12 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python创造虚拟环境方法总结
2019/03/04 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
在python image 中实现安装中文字体
2020/05/16 Python
神路信息Java面试题目
2013/03/31 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
医院护士的求职信
2014/01/03 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
土地租赁意向书
2014/07/30 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
见习报告的格式
2014/11/04 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
休学证明范本
2015/06/19 职场文书