【Web API DOM08】事件汇总(加载事件、滚动事件)

一:页面加载事件

1 概述:

页面加载指加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时,触发事件

2 load事件

  1. 监听页面所有资源加载完毕

//页面加载事件
//window 对象表示一个包含 DOM 文档的窗口
window.addEventListener('load',function(){//执行操作
})

3 DOMContentLoaded事件

  1. 什么是DOMContentLoaded事件

    1. 指HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载
  2. 应用

    1. 监听页面DOM加载完成
//页面加载事件
//Document 接口表示任何在浏览器中载入的网页,并作为网页内容的入口,也就是 DOM 树
document.addEventListener('DOMContentLoaded',function(){//执行操作
})

二:元素滚动事件

1 元素滚动是什么

页面或元素滚动的时候触发的事件

具体现实的应用:

1 固定导航栏

2 页面滚动到底部后,出现返回顶部按钮

2 scroll事件应用:

监听整个页面滚动:

window.addEventListener('scroll', function () {//
})

注:

  • 给window或document都添加scroll事件,都能实现对整个页面滚动监听,而触发的行为
  • 监听某个元素的内部滚动条直接给某个元素添加即可

3 获取页面滚动位置属性

1 scrollTop和scrollLeft

  • 获取被移动距离的大小
    • 距离:指元素内容往左、往上移动后看不到的距离
    • 两个属性的应用应尽可能在scroll事件中使用
    • 获取的数据是数值型数据
    • 该属性为可读写属性,可以通过赋值的形式操作
  • 获取页面向上滚动距离
    • 页面滚动首先要找到html元素(document.documentElement)
    • 通过找到的html元素添加scrollTop属性,从而获得移动距离

三:页面尺寸事件

1 resize事件

当页面尺寸发生变化时,调用事件

window.addEventListener('resize', function () {console.log(1)})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【阿里前端面试题】聊聊前端性能优化的方案,解决过什么样的性能问题?

大家好,我是“寻找DX3906”。每天进步一点。日积月累,有朝一日定会厚积薄发! 前言: 前面已经和大家分享了4篇面试题: 《【阿里前端面试题】浏览器的加载渲染过程》 《【阿里前端面试题】客户端和服务器交互&#xff…

IO流----字节流

字节流 字节流:操作:文件字节输入输出流 :写入数据:读取数据:文件拷贝: 带缓冲区的字节输入输出流:拷贝文件:写入数据:读取数据: 深入 带缓冲区的字节输出流 &#xff1a…

Java线程池execute和submit的区别

前言 ThreadPoolExecutor提供了两种方法来执行异步任务,分别是execute和submit,也是日常开发中经常使用的方法,那么它俩有什么区别呢? 语义不同 首先是语义上的不同。execute声明在Executor接口,它接受一个Runnable…

【论文阅读】Point2RBox (CVPR’2024)

paper:https://arxiv.org/abs/2311.14758 code:https://github.com/yuyi1005/point2rbox-mmrotate

阿里云sls 采集日志安装记录

参考阿里云给的安装文档 阿里云安装Logtail组件 注意这里,选择地域,是中国地域选中国,海外选海外即可 按照文档继续下去 修改配置文件./alibaba-cloud-log-all/values.yaml 所有的操作完成后,去控制台配置 以上操作的前提是…

[WWW2024]轻量数据依赖的异常检测重训练方法LARA

开篇 近日,由阿里云计算平台大数据基础工程技术团队主导,与浙江大学合作的论文《LARA: ALight and Anti-overfitting Retraining Approach for Unsupervised Time Series Anomaly Detection 》被WWW2024收录,该方法解决了云服务正常模式随时…

探索AIGC降重工具:确保论文原创性的新策略

如何有效降低AIGC论文的重复率,也就是我们说的aigc如何降重?AIGC疑似度过高确实是个比较愁人的问题。如果你用AI帮忙写了论文,就一定要在交稿之前做一下AIGC降重的检查。一般来说,如果论文的AIGC超过30%,很可能会被判定…

申请医疗设备注册变更时,需要补充考虑网络安全的情况有哪些?

在申请医疗器械设备注册变更时,需要补充网络安全的情况主要包括以下几点: 网络安全功能更新:如果医疗器械的自研软件发生网络安全功能更新,或者合并网络安全补丁更新的情形,需要单独提交一份自研软件网络安全功能更新…

#02 安装指南:如何配置Stable Diffusion环境

文章目录 前言前置条件第1步:安装Python和PIP第2步:创建虚拟环境第3步:安装PyTorch和CUDA第4步:安装Stable Diffusion相关库第5步:测试环境结论 前言 在之前的文章中,我们介绍了Stable Diffusion基础入门和…

【ARFoundation自学04】AR Tracked Image 图像追踪识别

1.添加组件 2.创建图像识别库 3.创建识别后追踪的物体(UI、模型等)

Java驱动的工程项目管理系统:实现高效协作与精准管理

在工程行业的现代管理实践中,有效地协同工作和信息共享对于提高工作效率和降低成本至关重要。本文将深入探讨一款基于Java技术的工程项目管理系统,该系统采用前后端分离的架构,功能全面,旨在满足不同角色的需求,从项目…

go语言切片去重的3种方式总结

go语言中的切片是使用非常频繁的一个数据结构,对于他的去重,我们可以有以下3种方式 1. 切片slice去重 利用map的key不能重复的特性append函数 一次for循环搞定 这个模式时间复杂度最低,效率最高, 如果go版本大于1.21推荐使用这…

PlugLink与RPA的完美结合:打造智能自动化工作流(附源码)

PlugLink与RPA的完美结合:打造智能自动化工作流 自动化技术已经成为提高效率和减少错误的关键手段。两种主要的自动化技术——PlugLink和RPA(机器人流程自动化)——各有特色。本文将详细探讨PlugLink与RPA的不同之处,并介绍它们如…

软件测试需求管理指南规范(Word原件,项目管理全资料)

3 测试需求 3.1 测试范围 3.2 测试目标 4 测试需求的现状 5 测试需求的内容 5.1 主体内容 5.2 管理内容 6 测试需求的制定 6.1 需求信息来源 6.2 需求分析 6.2.1 功能性需求 6.2.2 系统功能需求 6.2.3 界面需求 6.2.4 安装需求 6.2.5 业务需求 6.2.6 非功能性需求 6.2.7 性能需…

ai怎么导出jpg?让我告诉你答案【详】

在设计和创意工作中,Adobe Illustrator(AI)是一款不可或缺的工具。然而,当我们将设计作品导出为JPG格式时,可能会遇到一些问题。ai怎么导出jpg?如何确保导出的JPG图片保持高质量?接下来&#xf…

异步通知驱动实例

目录 异步通知驱动功能的优点 异步通知测试程序: 异步驱动程序 异步通知驱动功能的优点 提高性能:通过允许应用程序在等待操作完成时执行其他任务,可以提高应用程序的整体性能。改善用户体验:应用程序可以保持响应性,用户界面可以流畅地更新,提供更好的用户体验。资源…

【Js】深入浅出的js for循环 for loop以及闭坑指南

在JavaScript中使用forEach循环来删除数组中的特定元素可能会导致一些问题,因为forEach不允许你在迭代过程中修改数组的长度。 这会导致意外的行为,例如跳过元素或错误地索引。因此,建议使用其他方法来安全地删除数组中的元素。 存在的问题 1…

php质量工具系列之phpmd

PHPMD PHP Mess Detector 它是PHP Depend的一个衍生项目,用于测量的原始指标。 PHPMD所做的是,扫描项目中可能出现的问题如: 可能的bug次优码过于复杂的表达式未使用的参数、方法、属性 PHPMD是一个成熟的项目,它提供了一组不同的…

HarmonyOS NEXT Push接入

接入HarmonyOS NEXT Push 推送功能,相比于 Android 真的是简单太多。不再需要适配接入各个厂家的推送 SDK,真是舒服。 1.开通推送服务与配置Client ID 1.1 创建应用获取Client ID 按照官方文档来就可以了:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides…

常用的接口测试工具

大家好,当谈到软件开发中的质量保证时,接口测试无疑是至关重要的一环。在当今快节奏的开发环境中,确保应用程序的各个组件之间的交互正常运作是至关重要的。而接口测试工具则成为了开发人员和测试人员的得力助手,帮助他们有效地测…