Web APIs五---网页特效

1.scroll滚动事件

当页面滚动时触发
可以给 window 或 document 添加

window.addEventListener('scroll', function () {
    console.log('页面滚动')
})

2.load加载事件

load 事件可以给window注册 给资源注册
等页面结构及外部资源(js文件、css文件、图片等)全加载完成才执行js代码

window.addEventListener('load', function () {
    let div = document.querySelector('div')
    div.addEventListener('click', function () {
         alert('点了')
    })
})

let pic = document.querySelector('.pic');
    console.log(pic.width)      //0
pic.addEventListener('load', function () {
    console.log(pic.width)    //600
})

DOMContentLoaded 事件是给document注册的
当HTML文档加载和解析完成之后，DOMContentLoaded 事件就被触发，无需等待外部资源加载

document.addEventListener('DOMContentLoaded', function () {
    let div = document.querySelector('div')
    div.addEventListener('click', function () {
        alert('点了')
    })
})

3.scroll家族

scrollWidth scrollHeight 获取元素内容 宽高 只读属性 返回纯数值
scrollLeft scrollTop 获取内容滚动卷曲距离 可修改属性 返回纯数值
document.documentElement.scrollTop获得当前页面被卷去的头部

4.offset家族

offsetWidth offsetHeight 获取元素真实的宽高 包含边框
offsetLeft offsetTop 获取元素距离定位父级元素的 左 上 距离 定位父级如果没有的话，就是获取元素到body的距离
都是只读属性，修改无效

5.client家族

clientWidth clientHeight 获取元素可视区大小 不包含边框
lientLeft clientTop 左边框宽度和上边边框宽度
都是只读属性
clientWidth clientHeight会在窗口尺寸改变的时候触发resize事件

// 当窗口变化的时候触发的事件
window.addEventListener('resize', function () {
   // 页面可视区大小
   let w = document.documentElement.clientWidth
   if (w >= 1200) {
       document.body.style.backgroundColor = 'lime'
   } else if (w >= 750) {
       document.body.style.backgroundColor = 'hotpink'
   } else {
       document.body.style.backgroundColor = 'yellow'
   }
   })

6.给window注册的事件

load 加载事件
scroll 滚动事件
resize 浏览器大小发生改变