JS-WebAPIs-其他事件(三)

• 页面加载事件

页面加载事件主要有二种事件,分别是load和DOMContentLoaded

  • 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
  • 为什么要学?
  1. 有些时候需要等页面资源全部处理完了做一些事情
  2. 老代码喜欢把 script 写在 

load事件

  • 事件名:load
  • 监听页面所有资源加载完毕:

  • 注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件 

DOMContentLoaded事件

  • 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完 全加载
  • 事件名:DOMContentLoaded
  • 监听页面DOM加载完毕:

 总结:

•页面滚动事件

  • 什么是元素滚动事件?

滚动条在滚动的时候持续触发的事件

  • 为什么要学?

很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部

  • 事件名:scroll
  • 监听整个页面滚动:

  • 监听某个元素的内部滚动直接给某个元素加即可 

页面滚动事件-获取位置

  • 开发中,我们经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素,或者固定一个元素 

总结:

页面滚动事件-滚动到指定的坐标

  • scrollTo() 方法可把内容滚动到指定的坐标
  • 语法:
  • 元素.scrollTo(x, y)

• 页面尺寸事件

页面尺寸事件-获取元素宽高 

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

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

相关文章

Hadoop详解

Hadoop 概念 就是一个大数据解决方案。它提供了一套分布式系统基础架构。 核心内容包含 hdfs 和mapreduce。hadoop2.0 以后引入 yarn. hdfs 是提供数据存储的,mapreduce 是方便数据计算的。 hdfs 又对应 namenode 和 datanode. namenode 负责保存元数据的基本信息…

YZ系列工具之YZ04:文本批量替换使用说明文档

我给VBA下的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。我的教程一共九套一部VBA手册,教程分为初级、中级、高级三大部分。是对VBA的系统讲解,从简单的…

解锁新身份:无忧秘书智脑-AI智能直播的10宫格姓氏头像制作秘籍

在这个信息爆炸的时代,一个独特的标识是个人或品牌在众多竞争者中脱颖而出的关键。而头像作为我们日常在线身份的一部分,更是我们展示个性和风格的重要窗口。无忧秘书智脑-AI智能直播最新推出的专属姓氏10宫格头像功能(ai6ai69),为…

【Python学习】Python学习21- 正则表达式(2)

目录 【Python学习】Python学习21- 正则表达式(2) 前言字符串检索和替换repl 参数是一个函数参考 文章所属专区 Python学习 前言 本章节主要说明Python的正则表达式。 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与…

MySQL缓冲池(Buffer Pool)深入解析:原理、组成及其在数据操作中的核心作用

在关系型数据库管理系统(RDBMS)中,性能优化一直是数据库管理员和开发者关注的焦点。作为最流行的开源RDBMS之一,MySQL提供了多种优化手段,其中InnoDB存储引擎的缓冲池(Buffer Pool)是最为关键的…

小埋公司的IPO方案的题解

目录 原题描述: 题目描述 输入格式 输出格式 输出格式 样例 #1 样例输入 #1 样例输出 #1 样例 #2 样例输入 #2 样例输出 #2 提示 题目大意: 主要思路: 但是but 代码code: 时间限制: 500ms 空间限制: 65536kB 原题…

pytest 参数化测试用例构建

在之前的文章中主要分享了 pytest 的实用特性,接下来讲 Pytest 参数化用例的构建。 如果待测试的输入与输出是一组数据,可以把测试数据组织起来用不同的测试数据调用相同的测试方法。参数化顾名思义就是把不同的参数,写到一个集合里&#xf…

Apipost智能Mock教程

在接口开发过程中,Mock功能可以帮助开发者快速测试和验证接口的正确性和稳定性,以便快速迭代和修复问题。Apipost推出智能Mock功能,可以在智能期望中填写一些触发条件,开启后,Apipost会根据已设置的触发条件&#xff0…

大创项目推荐 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 大数据全国疫情数据分析与3D可视化 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐&#xff0…

力扣70. 爬楼梯(动态规划 Java,C++解法)

Problem: 70. 爬楼梯 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 由于本题目中第i层台阶只能由于第i- 1层台阶和第i-2层台阶走来,所以可以联想到动态规划,具体如下: 1.定义多阶段决策模型:对于每一上台阶看作一种状…

zookeeper window 安装

下载 Apache ZooKeeper 解压Zookeeper安装包到指定目录,注意目录不要有空格。 备份zoo_sample.cfg并改名zoo.cfg 注意:此处的路径一定要使用双斜杠" \\ " D:\\apache-zookeeper-3.8.3-bin\\data 新建环境变量:ZOOKEEPER_HOME D…

如何利用chatgpt提升工作效率?教你chatGTP怎么提高效率

如何利用chatgpt提升工作效率?教你chatGTP怎么提高效率 在当今信息时代,人们的工作需要处理的信息量越来越大,而随着人工智能技术的不断发展,越来越多的企业开始应用生成式AI系统ChatGPT来提高工作效率。下面介绍如何利用ChatGPT来…

鸿蒙原生应用/元服务开发-延迟任务说明(一)

一、功能介绍 应用退至后台后,需要执行实时性要求不高的任务,例如有网络时不定期主动获取邮件等,可以使用延迟任务。当应用满足设定条件(包括网络类型、充电类型、存储状态、电池状态、定时状态等)时,将任务…

【⭐AI工具⭐】实用工具推荐

目录 壹 实用工具工具合集TinyWowHiPDF 公式处理SimpleTex公式中常用的希腊字母符号公式在论文中的格式 图像处理BgRemoverPix Fix像素蒸发Photopea 音频处理啦啦爱 笔记整理飞书妙记 素材整理Eagle 其它一次性临时电子邮件近邻词汇检索据意查句诗三百能不能好好说话&#xff1…

PaddleDetection学习3——使用Paddle-Lite在 Android 上部署PicoDet模型(fp16)

使用Paddle-Lite在 Android 上运行PicoDet模型(fp16) 1. 环境准备2. 部署步骤2.1 下载Paddle-Lite-Demo2.2 打开 picodet_detection_demo项目2.2.1 修改build.gradle,配置国内镜像仓库2.2.2 NDK 配置错误问题2.2.3 gradle.properties文件配置…

flask分页宏增加更多参数

背景:我正在开发一个博客,核心的两个model是文章和文章类别。 现在想要实现的功能是:点击一个文章类别,以分页的形式显示这个文章类别下的所有文章,类似这种效果。 参考的书中分页宏只接受页数这一个参数,…

iconfont矢量图标样式引入

font-face {font-family: "iconfont"; /* Project id 2848128 */src: url(//at.alicdn.com/t/font_2848128_mchidofoxgo.woff2?t1643706746390) format(woff2),url(//at.alicdn.com/t/font_2848128_mchidofoxgo.woff?t1643706746390) format(woff),url(//at.alicdn…

Keil5 MDK的安装

【STM32入门教程-2023版 细致讲解 中文字幕】 https://www.bilibili.com/video/BV1th411z7sn/?p3&share_sourcecopy_web&vd_source9e3e013d351349501787efa88d17f2e4 1.下载Keil5 MDK软件,双击打开 2.在D盘新建文件 3.安装 4.选择支持包(离线安…

easyui渲染隐藏域<input type=“hidden“ />为textbox可作为分割条使用

最近在修改前端代码的时候&#xff0c;偶然发现使用javascript代码渲染的方式将<input type"hidden" />渲染为textbox时&#xff0c;会显示一个神奇的效果&#xff0c;这个textbox输入框并不会隐藏&#xff0c;而是显示未一个细条&#xff0c;博主发现非常适合…

数据结构【DS】Ch6 图

文章目录 图的基本概念图的存储及基本操作图的遍历图的应用图的连通性问题最小生成树最短路径问题拓扑序列关键路径 图的基本概念 图的存储及基本操作 图的遍历 图的应用 图的连通性问题 最小生成树 最短路径问题 拓扑序列 关键路径