滚动事件/加载事件

滚动事件和加载事件

滚动事件

事件名：scroll

当页面进行滚动时触发的事件

// 监听页面的滚动
window.addEventListener('scroll', function () {
  console.log('是我');
})
// 监听元素的滚动
let box = document.querySelector('.box')
box.addEventListener('scroll', function () {
  console.log('还是我');
})

注：一般都是给 window 或 document 添加 scroll 事件

加载事件

事件名：load

// 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
// window的load事件也叫 入口函数
window.addEventListener('load',function()) {}

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

事件名：DOMContentLoaded

// 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
window.addEventListener('DOMContentLoaded',function()) {}