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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript中this指向详解
2016/04/23 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
简单了解python模块概念
2018/01/11 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Django实现学生管理系统
2019/02/26 Python
Python读取实时数据流示例
2019/12/02 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
python自动化办公操作PPT的实现
2021/02/05 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
方正Java笔试题
2014/07/03 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
班主任与学生安全责任书
2014/07/25 职场文书