一.滾動事件和加載事件
1.滾動事件
- 當頁面進行滾動時觸發(fā)的事件
- 事件名 : scroll
- 監(jiān)聽整個頁面滾動給 window 或 document 加
window.addEventListener('scroll', function () {
//執(zhí)行的操作
})
document.addEventListener('scroll', function () {
//執(zhí)行的操作
})
2.加載事件
2.1 load事件
- 加載外部資源（如圖片仔蝌、外聯(lián)CSS和JavaScript等）加載完畢時觸發(fā)的事件
- 事件名：load
- load 事件 : 可以等到頁面加載以及外部資源(js文件、css文件垂蜗、圖片。欺劳。愈犹。)加載完成才執(zhí)行js代碼
- 監(jiān)聽頁面所有資源加載完畢 load 只能給 window 給document添加無效
注意：不僅可以監(jiān)聽整個頁面資源加載完畢街图，也可以針對某個資源綁定load事件
window.addEventListener('load', function () {
// 執(zhí)行的操作
})
2.2 DOMContentLoaded 事件
- 當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)金吗，而無需等待樣式表十兢、 圖像等完全加載
- 事件名：DOMContentLoaded
- DOMContentLoaded 是給document注冊
document.addEventListener('DOMContentLoaded', function () {
//執(zhí)行的操作
})
二.元素的大小和位置
1.scroll家族
- 獲取寬高:
scrollWidth和scrollHeight
獲取元素的內(nèi)容總寬高（不包含滾動條）返回值不帶單位
只讀屬性 - 獲取位置:
scrollLeft和scrollTop
獲取元素內(nèi)容往左、往上滾出去看不到的距離
這兩個屬性是可以修改的
1.png - 給頁面注冊滾動事件摇庙， 來獲取頁面的滾動卷曲距離
document.addEventListener('scroll',function () {
console.log(document.documentElement.scrollTop)
})
2.png
html的獲取方式 document.documentElement
獲取頁面的滾動卷曲距離 document.documentElement.scrollTop
返回頂部 : document.documentElement.scrollTop = 0
2.offset家族
- 獲取寬高：
offsetWidth和offsetHeight 獲取元素的真實寬高旱物、包含元素自身設置的寬高、padding卫袒、border -
獲取位置：
offsetLeft和offsetTop 獲取元素距離自己定位父級元素的左宵呛、上距離
定位父級如果沒有的話，就是獲取元素到body的距離
都是只讀屬性
3.png
3.client家族
- 獲取寬高：
clientWidth和clientHeight
獲取元素的可見部分寬高（不包含邊框玛臂，滾動條等） 只讀屬性 - 獲取位置：
clientLeft和clientTop
獲取左邊框和上邊框?qū)挾? 只讀屬性 - resize事件 : 當瀏覽器大小發(fā)生改變的時候會觸發(fā)該事件 ==> 可以用于獲取頁面可視區(qū)大小
// 當窗口變化的時候觸發(fā)的事件
window.addEventListener('resize', function () {
//執(zhí)行的代碼
})
4.png
