1.scroll滾動事件

當頁面滾動時觸發(fā)
可以給 window 或 document 添加

window.addEventListener('scroll', function () {
    console.log('頁面滾動')
})

2.load加載事件

load 事件可以給window注冊 給資源注冊
等頁面結(jié)構(gòu)及外部資源(js文件、css文件、圖片等)全加載完成才執(zhí)行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 事件就被觸發(fā)，無需等待外部資源加載

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

3.scroll家族

scrollWidth scrollHeight 獲取元素內(nèi)容 寬高 只讀屬性 返回純數(shù)值
scrollLeft scrollTop 獲取內(nèi)容滾動卷曲距離 可修改屬性 返回純數(shù)值
document.documentElement.scrollTop獲得當前頁面被卷去的頭部

4.offset家族

offsetWidth offsetHeight 獲取元素真實的寬高 包含邊框
offsetLeft offsetTop 獲取元素距離定位父級元素的 左 上 距離 定位父級如果沒有的話，就是獲取元素到body的距離
都是只讀屬性，修改無效

5.client家族

clientWidth clientHeight 獲取元素可視區(qū)大小 不包含邊框
lientLeft clientTop 左邊框?qū)挾群蜕线呥吙驅(qū)挾?br> 都是只讀屬性
clientWidth clientHeight會在窗口尺寸改變的時候觸發(fā)resize事件

// 當窗口變化的時候觸發(fā)的事件
window.addEventListener('resize', function () {
   // 頁面可視區(qū)大小
   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 瀏覽器大小發(fā)生改變