滾動事件和加載事件
滾動事件：
當頁面進行滾動時觸發(fā)的事件
事件名：scroll
監(jiān)聽整個頁面滾動
語法：
document.addEventListener('scroll', function () {
console.log('滾動了')
})
加載事件：
加載外部資源（如圖片恼策、外聯(lián)CSS和JavaScript等）加載完畢時觸發(fā)的事件
為什么要學？
? 有些時候需要等頁面資源全部處理完了做一些事情
? 老代碼喜歡把 script 寫在 head 中，這時候直接找 dom 元素找不到
事件名：load
監(jiān)聽頁面所有資源加載完畢：
給 window 添加 load 事件：
window.addEventListener('load', function () {
// 把代碼寫在load的事件處理函數(shù)中
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('嘻嘻')
})
})
注意：不僅可以監(jiān)聽整個頁面資源加載完畢涣楷，也可以針對某個資源綁定load事件
1.2 加載事件：
當初始的 HTML 文檔被完全加載和解析完成之后分唾，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表狮斗、 圖像等完全加載
事件名：DOMContentLoaded
監(jiān)聽頁面DOM加載完畢： ? 給 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function () {
console.log('測試')
// 把代碼寫在DOMContentLoaded的事件處理函數(shù)中
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('嘻嘻')
})
})
元素大小和位置
scroll家族
獲取寬高：
獲取元素的內(nèi)容總寬高（不包含滾動條）返回值不帶單位
scrollWidth
scrollHeight
只讀屬性绽乔，不能修改
獲取位置：
獲取元素內(nèi)容往左、往上滾出去看不到的距離
scrollLeft
scrollTop
這兩個屬性是可以修改的t
獲取頁面的滾動卷曲距離： document.documentElement.scrollTop
案例：頁面滾動顯示返回頂部按鈕
// 獲取元素
let backtop = document.querySelector('.backtop')
// 需求：
// 1. 滾動的時候控制返回頂部的按鈕顯示還是隱藏
// 1.1 當頁面滾動卷曲的距離 超過了 500碳褒， 就顯示折砸，否則隱藏
// 1.2 要監(jiān)聽頁面滾動事件 給頁面注冊scroll滾動事件
// 2. 點擊按鈕，實現(xiàn)返回頂部
// 需求1
window.addEventListener('scroll', function () {
// 來頁面滾動卷曲的距離
let y = document.documentElement.scrollTop
// console.log(y)
// 判斷是否有超過600
if (y >= 600) {
backtop.style.display = 'block'
} else {
backtop.style.display = 'none'
}
})
// 需求2：
backtop.addEventListener('click', function () {
// 返回頂部
document.documentElement.scrollTop = 0
})
offset家族
獲取寬高：
offsetWidth和offsetHeight
獲取元素的真實寬高沙峻、包含元素自身設(shè)置的寬高睦授、padding、border
獲取位置：
offsetLeft和offsetTop
獲取元素距離自己定位父級元素的左摔寨、上距離
注意：都是只讀屬性
案例：仿京東固定導航欄案例
let sk = document.querySelector('.sk')
let header = document.querySelector('.header')
// 需求：當頁面滾動距離超過秒殺模塊的時候去枷，顯示header（top為0） 否則隱藏（top為-80px）
// 分析：
// 1. 給window注冊scroll滾動事件
// 2. 獲取頁面滾動距離 scrollTop
// 3. scrollTop 和 秒殺模塊到頁面頂部的距離 offsetTop
// 3.1 scrollTop >= sk.offsetTop 顯示header
// 3.2 否則隱藏（top為-80px）
// 1.
window.addEventListener('scroll', function () {
// 2
let y = document.documentElement.scrollTop
console.log(y, sk.offsetTop)
// 3.
if (y >= sk.offsetTop) {
// 注意：style別落下
// 0的時候，單位px可以不寫
header.style.top = 0
} else {
header.style.top = '-80px'
}
})
案例：電梯導航案例
// 導航
let items = document.querySelectorAll('.item')
// 內(nèi)容
let neirongs = document.querySelectorAll('.neirong')
// 需求: 點擊導航的時候
// 1. 當前點擊的導航高亮是复，其他導航不高亮 ==> 排他效果 （升級效果）
// 2. 頁面滾動到對應的位置上 ==> 該代碼寫在 點擊導航的事件處理函數(shù)里面
// 給所有導航注冊click ==> 別落下for循環(huán)删顶，items 是偽數(shù)組
for (let i = 0; i < items.length; i++) {
// console.log(items[i])
items[i].addEventListener('click', function () {
// 需求1: 排他
// 1. 先獲取到高亮的元素，將其高亮類名active移出掉
document.querySelector('.active').classList.remove('active')
// 2. 點擊的導航添加高亮類名active
this.classList.add('active')
// 需求2. 頁面滾動到對應的位置上
document.documentElement.scrollTop = neirongs[i].offsetTop
})
}
client家族
獲取寬高：
clientWidth和clientHeight
獲取元素的可見部分寬高（不包含邊框淑廊，滾動條等）
獲取位置：
clientLeft和clientTop
獲取左邊框和上邊框?qū)挾?br>
注意:都是只讀屬性
會在窗口尺寸改變的時候觸發(fā)事件： resize翼闹，用于獲取頁面可視區(qū)大小
window.addEventListener('resize', function () {
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight)
})
綜合案例：輪播圖案例
// 輪播圖開始啦
// 需求①：小圖標鼠標經(jīng)過事件
// 鼠標經(jīng)過小圖片，當前高亮蒋纬，其余兄弟變淡 添加類
let lis = document.querySelectorAll('.indicator li')
let piclis = document.querySelectorAll('.slides ul li')
let text = document.querySelector('.extra h3')
let next = document.querySelector('.next')
let prev = document.querySelector('.prev')
let main = document.querySelector('.main')
// 給多個小li綁定事件
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function () {
// 選出唯一的那個active 猎荠，刪除類
document.querySelector('.indicator .active').classList.remove('active')
// 鼠標經(jīng)過誰，誰加上active 這個類
this.classList.add('active')
// 需求② ：大圖片跟隨變化 一定要放到鼠標經(jīng)過事件里面
// 對應的大圖片跟著顯示蜀备，如果想要過渡效果关摇，可以使用opacity效果，可以利用CSS淡入 淡出的效果碾阁，還是添加類
// 選出唯一的那個active 输虱，刪除類
document.querySelector('.slides ul .active').classList.remove('active')
// 對應序號的那個 li，誰加上active 這個類
piclis[i].classList.add('active')
text.innerHTML = `第${i + 1}張圖的描述信息`
// 需求④：解決一個BUG
// 點擊右側(cè)按鈕可以實現(xiàn)播放下一張脂凶，但是鼠標經(jīng)過前面的宪睹，播放就會亂序
// 解決方案： 讓變化量 index 重新賦值為 當前鼠標經(jīng)過的索引號
// 鼠標經(jīng)過了那個小li 他的索引號就是 i
// 右側(cè)按鈕是通過 index 來了控制播放的
index = i
})
}
// 需求③：右側(cè)按鈕播放效果
// 點擊右側(cè)按鈕，可以自動播放下一張圖片
// 需要一個變化量 index 不斷自增
// 然后播放下一張圖片
// 如果到了最后一張蚕钦，必須要還原為第1張圖片
// 教你一招： 索引號 = 索引號 % 數(shù)組長度 （放到播放前面）
let index = 0 // 全局變量 信號量 控制器 為了給 右側(cè)按鈕和左側(cè)按鈕同時使用
next.addEventListener('click', function () {
index++
// 選出 index 小圖片 做操作
// console.log(index)
// if (index === lis.length) {
// index = 0
// }
index = index % lis.length
common()
})
// 需求⑤：左側(cè)按鈕播放效果
// 點擊左側(cè)按鈕亭病，可以自動播放上一張圖片
// 需要一個變化量 index 不斷自減
// 然后播放上一張圖片
// 如果到了第一張，必須要從最后一張播放
// 教你一招： 索引號 = (數(shù)組長度 + 索引號) % 數(shù)組長度
prev.addEventListener('click', function () {
index--
// 選出 index 小圖片 做操作
// console.log(index)
if (index < 0) {
index = lis.length - 1
}
// index = (lis.length + index) % lis.length
common()
})
// 需求⑥：
// 因為左側(cè)按鈕和右側(cè)按鈕里面有大量相同的操作嘶居，可以抽取封裝一個函數(shù) common
function common() {
document.querySelector('.indicator .active').classList.remove('active')
lis[index].classList.add('active')
// 選出 index 大圖片 做操作
document.querySelector('.slides ul .active').classList.remove('active')
piclis[index].classList.add('active')
text.innerHTML = `第${index + 1}張圖的描述信息`
}
// 需求⑦：開啟定時器
// 其實定時器自動播放罪帖，就相當于點擊了右側(cè)按鈕，此時只需要， next.click()
let timer = setInterval(function () {
// 自動調(diào)用右側(cè)按鈕的點擊事件
next.click()
}, 1000)
// 需求⑧：
// 鼠標經(jīng)過停止定時器 （清除定時器）
main.addEventListener('mouseenter', function () {
clearInterval(timer)
})
// 鼠標離開開啟定時器 （開啟定時器）
main.addEventListener('mouseleave', function () {
timer = setInterval(function () {
// 自動調(diào)用右側(cè)按鈕的點擊事件
next.click()
}, 1000)
})
