1.scroll滾動(dòng)事件
當(dāng)頁(yè)面滾動(dòng)時(shí)觸發(fā)
可以給 window 或 document 添加
window.addEventListener('scroll', function () {
console.log('頁(yè)面滾動(dòng)')
})
2.load加載事件
load 事件可以給window注冊(cè) 給資源注冊(cè)
等頁(yè)面結(jié)構(gòu)及外部資源(js文件、css文件、圖片等)全加載完成才執(zhí)行js代碼
window.addEventListener('load', function () {
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('點(diǎn)了')
})
})
let pic = document.querySelector('.pic');
console.log(pic.width) //0
pic.addEventListener('load', function () {
console.log(pic.width) //600
})
DOMContentLoaded 事件是給document注冊(cè)的
當(dāng)HTML文檔加載和解析完成之后挤茄，DOMContentLoaded 事件就被觸發(fā)翁锡，無(wú)需等待外部資源加載
document.addEventListener('DOMContentLoaded', function () {
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('點(diǎn)了')
})
})
3.scroll家族
scrollWidth scrollHeight 獲取元素內(nèi)容 寬高 只讀屬性 返回純數(shù)值
scrollLeft scrollTop 獲取內(nèi)容滾動(dòng)卷曲距離 可修改屬性 返回純數(shù)值
document.documentElement.scrollTop獲得當(dāng)前頁(yè)面被卷去的頭部
4.offset家族
offsetWidth offsetHeight 獲取元素真實(shí)的寬高 包含邊框
offsetLeft offsetTop 獲取元素距離定位父級(jí)元素的 左 上 距離 定位父級(jí)如果沒(méi)有的話荆责，就是獲取元素到body的距離
都是只讀屬性尤蛮，修改無(wú)效
5.client家族
clientWidth clientHeight 獲取元素可視區(qū)大小 不包含邊框
lientLeft clientTop 左邊框?qū)挾群蜕线呥吙驅(qū)挾?br>
都是只讀屬性
clientWidth clientHeight會(huì)在窗口尺寸改變的時(shí)候觸發(fā)resize事件
// 當(dāng)窗口變化的時(shí)候觸發(fā)的事件
window.addEventListener('resize', function () {
// 頁(yè)面可視區(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注冊(cè)的事件
load 加載事件
scroll 滾動(dòng)事件
resize 瀏覽器大小發(fā)生改變
