JS-WebAPIs-其他事件(三)

• 页面加载事件

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

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

load事件

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

DOMContentLoaded事件

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

总结:

•页面滚动事件

  • 什么是元素滚动事件?

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

  • 为什么要学?

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

  • 事件名:scroll
  • 监听整个页面滚动:
  • 监听某个元素的内部滚动直接给某个元素加即可

页面滚动事件-获取位置

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

总结:

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

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

• 页面尺寸事件

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

相关推荐
Bigger7 分钟前
告别版本焦虑:如何为 Hugo 项目定制专属构建环境
前端·架构·go
代码匠心2 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong3 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode3 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户5433081441943 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo3 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭4 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木4 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮4 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati4 小时前
Vue3 父子组件通信完全指南
前端·面试