【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)
    })