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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
给多个地址发邮件的类
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python中管道用法入门实例
2015/06/04 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python绘制3D图形
2018/05/03 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
Pandas的Apply函数具体使用
2020/07/21 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
亮剑精神观后感
2015/06/05 职场文书
小学教师见习总结
2015/06/23 职场文书
行政处罚告知书
2015/07/01 职场文书
聘任书的格式及模板
2019/10/28 职场文书