2.1 窗口加载事件

window.onload = function() { }
或者
window.addEventListener("load", function(){})

window.onload是窗口(页面)加载事件,当文档内容完全加载完会触发该事件(包括图像、脚本文件、css文件等),就调用的处理函数。

注意:

1.有了window.onload就可以把js代码写在页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。

2.window.onload传统注册事件方式只能写一次,如果有多个,以最后一个window.onload为准。

3.如果使用addEventListener则没有限制。

document.addEventListener('DOMContentLoaded', function(){})
DOMContentLoaded事件触发时,仅当DOM加载完毕,不包括样式表、图片、flash等等。IE9以上才支持。
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然会影响用户的体验,
此时用DOMContentLoaded事件比较合适。

2.2 调整窗口大小事件

window.onresize = function() { }
window.addEventListener("resize", function(){});

window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数。

注意:

1.只要窗口大小发生像素变化,就会触发这个事件。

2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

 

window对象的常见事件的更多相关文章

  1. react事件中的事件对象和常见事件

    不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...

  2. 第二章 函数和window对象

    1.什么是函数函数相当于Java中的方法,每一个函数可以做一件事情,但是不属于某一个类 2.使用函数的好处:使代码模块化,功能分工明确,方便调用,思路功能清晰 3.函数的分类:(1)系统函数:系统提前 ...

  3. JavaScript函数和window对象

    一.什么是函数 函数的含义:类似于Java中的方法,是完成特定任务的代码语句块 使用更简单:不用定义属于某个类,直接使用 二.常用系统函数 parseInt ("字符串")     ...

  4. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  5. window对象的几个重要方法

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Java ...

  6. 让$(window).scroll()监听事件只执行一次

    可以用jQuery中的unbind()来进行事件解绑. $(window).scroll(function() { console.log("滚离顶部" + $(document) ...

  7. window对象的属性及事件。

    不同的运行环境有不同的“顶层对象”,而在浏览器的环境中,顶层对象就是window对象.window就是指当前的浏览器窗口. 例:var a = 1: window.a; //1 1.window对象的 ...

  8. window对象中的常见方法

    <body><!-- window对象中的常见方法--><script type="text/javascript"> var timeid; ...

  9. JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  10. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

随机推荐

  1. .NET8顶级调试lldb观察FOH堆字符串分配

    前言 好久没有动用LLDB了,这种未来的下一代高性能调试器应该是用在Linux内核系统的Arm64/Riscv64/X64系统指令集上的,LLDB Debug .NET有点杀鸡用牛刀.本篇通过它来看下 ...

  2. [洛谷P8494] [IOI2022] 最罕见的昆虫

    [IOI2022] 最罕见的昆虫 题目描述 Pak Blangkon 的房子四周有 \(N\) 只昆虫,编号为 \(0\) 至 \(N-1\).每只昆虫有一个类型,以从 \(0\) 至 \(10^9\ ...

  3. 3 与HTTP相关的各种协议

    目录 1 TCP/IP 2 DNS 3 URI/URL 4 HTTPS 5 代理 1 TCP/IP TCP/IP是网络世界最常用协议,HTTP通常运行在TCP/IP提供的可靠传输基础上 IP 协议是& ...

  4. ES索引误删的名场面

    ES索引误删的名场面 慌了3秒,果断发个邮件: 01 最近,在版本发布时: ES线上未备份的索引,被当场「误删」了: 对于新手来说,妥妥的社死名场面: 对于老手来说,慌它3秒表示一下态度: 当时的情况 ...

  5. ElasticSearch-Mapping类型映射-增删改查

    https://www.elastic.co/guide/en/elasticsearch/reference/6.8/mapping.html 7.x版本后默认都是_doc类型 增加Mapping映 ...

  6. Oracle参数文件spfile

    spfile:server parameter file. spfile只能通过OEM(oracle enterprise manager)软件或者alter system命令进行修改. spfile ...

  7. AntDesignBlazor示例——Modal表单

    本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考. 示例代码仓库:https://gitee.com/known/BlazorDemo 1. 学习目标 创建Mod ...

  8. 图纸安全管理:华企盾DSC数据防泄密系统的综合解决方案

    企业设计人员创造出的图纸既是珍贵的知识产权,又承载着公司的创新力和竞争力.然而,随着信息技术的迅速发展,图纸泄密风险也在不断增加.为了保护这一重要的企业资产,华企盾DSC数据防泄密系统提供了一系列专业 ...

  9. lottie 动画在 vue 中的使用

    前言 最近我所负责的项目中,我采用了动画效果,并开始使用 gif 来实现.然而,在实践过程中,我发现 gif 格式的动画在 git 中出现了明显的锯齿感,这让我非常困扰.为了追求更完美的表现效果,我最 ...

  10. 用Spring Boot 3.2虚拟线程搭建静态文件服务器有多快?

    Spring Boot 3.2 于 2023 年 11 月大张旗鼓地发布,标志着 Java 开发领域的一个关键时刻.这一突破性的版本引入了一系列革命性的功能,包括: 虚拟线程:利用 Project L ...