JS-WebAPIs-其他事件（三）

• 页面加载事件

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

• 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
• 为什么要学？

1. 有些时候需要等页面资源全部处理完了做一些事情
2. 老代码喜欢把 script 写在

load事件

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

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

DOMContentLoaded事件

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

总结：

•页面滚动事件

• 什么是元素滚动事件？

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

• 为什么要学？

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

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

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

页面滚动事件-获取位置

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

总结：

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

• scrollTo() 方法可把内容滚动到指定的坐标
• 语法：

• 元素.scrollTo(x, y)

• 页面尺寸事件

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