JavaScript的window.onload事件的理解

2023-11-13

window.onload()的作用

  • window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
  • window.onload() 通常用于 元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。

只有一个要执行的函数语法:

window.onload = funcRef;

在页面加载完成后 funcRef 方法会被调用。

有多个要执行的函数语法:

window.οnlοad=function(){
Func1();
Func2();
Func3();

}

在页面加载完成后依次执行 Func1、Func2、Func3。

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
 我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了,我们不得不把js代码放在页面的底端。
 但是我们在设计页面的时候,为了把js代码放在一起,或者一个让页面更加简洁的位置,那就有可能出现代码中操作的对象未被加载的情况,那么我们该如何去解决呢?这时候window.onload就被有了存在的意义了。

window.onload是什么?

window.onload是一个事件,在文档加载完成后能立即触发,并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即:window.onload =function (){这里写操作的代码};

发生要对对象进行,而对象还未被加载,导致相当于无操作的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

    document.getElementById("s").style.color = "green";

    </script>
</head>
<body>

<span id="s">要坚强,当然是选择原谅他啊!!!</span>
</body>
</html>

在这里插入图片描述
使用window.onload()方法处理的情况的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    window.onload  = function () {
    document.getElementById("s").style.color = "green";
}
    </script>
</head>
<body>

<span id="s">要坚强,当然是选择原谅他啊!!!</span>
</body>
</html>

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript的window.onload事件的理解 的相关文章

随机推荐

  • 西门子PLC全系列模块接线

    https www siemensplc com biancheng 10649 html
  • 最燃黑客情报官薛锋:端起AK伏特加,代表人民把坏人抓

    文 史中 一 情报专家从未凋零真相并不总是像女神一样遥不可及 在二战最为焦灼的时候 盟军迫切地想知道一件事情 德国人究竟有多少坦克 于是他们派出间谍 破译电报 对德国俘虏刑讯逼供 得出的结论是 德国每个月可以生产1000多辆坦克 可是好像哪
  • 用echo输出多个空行

    大家用shell编程 用echo输出空行的时候 通常想到就是用N个echo 如下输出三个空行 echo echo echo 虽然内心里还是觉得如上写法有些丑陋 其实 echo是还有更多用法的 这在手册里面是有说明的 通过查看手册 我们可以知
  • 深度学习系列资料总结

    作者简介 CSDN 阿里云人工智能领域博客专家 新星计划计算机视觉导师 百度飞桨PPDE 专注大数据与AI知识分享 公众号 GoAI的学习小屋 免费分享书籍 简历 导图等 更有交流群分享宝藏资料 关注公众号回复 加群 或 链接 加群 专栏推
  • opencv学习笔记

    include quickdemo h include shuzu h include
  • Flask数据库

    文章目录 一 ORM 1 1 什么是ORM 1 2 ORM的优缺点有哪些 1 3 Flask SQLAlchemy安装及设置 1 4 其他配置信息 1 5 常用的SQLAlchemy字段类型 1 6常用的SQLAlchemy列选项 常用的S
  • java docker nacos 9848端口报错

    问题 9848报错 新版本部署 Nacos2 0版本相比1 X新增了gRPC的通信方式 因此需要增加2个端口 新增端口是在配置的主端口 server port 基础上 进行一定偏移量自动生成 端口 与主端口的偏移量 描述 9848 1000
  • 【PTA】矩阵列平移

    给定一个 n n 的整数矩阵 对任一给定的正整数 k
  • python安装及配置

    1 python的下载及安装 1 1下载 从官网下载 https www python org 如图 点击downloads按钮 在下拉框中选择系统类型 windows Mac OS Linux等 选然后择下载最新版本的Python 1 2
  • JavaArrayList集合基础&学生管理系统

    1 ArrayList 集合和数组的区别 共同点 都是存储数据的容器 不同点 数组的容量是固定的 集合的容量是可变的 1 1 ArrayList的构造方法和添加方法 public ArrayList 创建一个空的集合对象 public bo
  • 爬虫:你一定要知道的模板(附源码)

    爬虫 你一定要知道的模板 附源码 作为一名cv程序员 梦想是造飞机 现实是拧螺丝 普通的爬虫 无非就是固定的模板 xpath bs定位标签 axios返回数据 json解析 selenium json解析版 import requests
  • chatgpt赋能python:Python和数学建模:如何参与数学建模比赛

    Python和数学建模 如何参与数学建模比赛 介绍 数学建模比赛通常是学术界和工业界一起组织的比赛 旨在让学生掌握实际问题的建模方法以及如何处理数据 分析和解决实际问题 Python是一个流行的编程语言 广泛应用于数据科学和数学建模领域 因
  • 单链表中求中间节点

    问题描述 求单链表中间节点的值 如果中间有2个 只要第一个 就是偶数情况下 只要中间的第一个 速度要快 解决方法 可以参照这篇博文 http blog csdn net dawn after dark article details 736
  • PHP与MySQL程序设计 学习笔记 第十章 处理文件和操作系统

    获取路径的文件名部分 不管文件系统中是否存在该路径 可选参数suffix指定一个后缀名 使返回的文件名忽略该后缀 path usr local text txt print basename path n 输出text txt print
  • 【翻译】 一个新的暂停/休眠的基础设施

    LWN订阅者的好处订阅LWN的主要好处是帮助我们继续出版 但除此之外 订阅者可以立即获得所有的网站内容和获得一些额外的网站功能 请今天就注册吧 作者 Jonathan Corbet 2008年3月19日 在参加会议时 你们的编辑多年来一直注
  • c#一个FTP操作封装类FTPHelper

    参考了网上一些代码 作了一些调整优化 using System using System Collections Generic using System Linq using System Text using System Net us
  • Perfmon监控Windows进程性能

    Perfmon简介 Perfmon Performance Monitor 是一款Windows自带的性能监控工具 提供了图表化的系统性能实时监视器 性能日志和警报管理 通过添加性能计数器 Performance Counter 可以实现对
  • Dell电脑插入耳机不能识别

    https blog csdn net weixin 42800268 article details 89418017 utm source app
  • 2020最新微信小程序学习资源汇总,包括文档、视频、系列教程、开源项目、框架!

    利用国庆这段时间收集的一些微信小程序学习资源 希望能够帮助到大家 持续更新 欢迎投稿 开源项目或者文章博客 来源知乎 https zhuanlan zhihu com p 193101814 目录 官网文档 系列教程 视频 开源项目 小程序
  • JavaScript的window.onload事件的理解

    window onload 的作用 window onload 方法用于在网页加载完毕后立刻执行的操作 即当 HTML 文档加载完毕后 立刻执行某个方法 window onload 通常用于 元素 在页面完全载入后 包括图片 css文件等等