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 相关文章推荐
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
swiper实现导航滚动效果
Dec 13 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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JS分页效果示例
2013/10/11 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python求解水仙花数的方法
2015/05/11 Python
Python+django实现文件上传
2016/01/17 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python列表对象实现原理详解
2019/07/01 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python解析微信dat文件的方法
2020/11/30 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
python help函数实例用法
2020/12/06 Python
市场营销专科应届生求职信
2013/11/24 职场文书
11月红领巾广播稿
2014/01/17 职场文书
体育教师自我鉴定
2014/02/12 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
酒店温馨提示语
2015/07/14 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers