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 相关文章推荐
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
yii操作session实例简介
2014/07/31 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
js实现聊天对话框
2020/02/08 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python写一个md5解密器示例
2018/02/23 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
EJB3.1都有哪些改进
2012/11/17 面试题
财务会计专业推荐信
2013/11/30 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
初中生毕业评语
2014/12/29 职场文书
区域经理岗位职责
2015/02/02 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers