DOM- 网页特效篇

滚动事件

当页面进行滚动时触发的事件

事件名：scroll

监听整个页面滚动：

给 window 或 document 添加 scroll 事件，监听某个元素的内部滚动直接给某个元素加即可

加载事件

（1）加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕： 给 window 添加 load 事件

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

 （2）当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕： 给 document 添加 DOMContentLoaded 事件

 

元素大小和位置

scroll家族

获取宽高： 获取元素的内容总宽高（不包含滚动条）返回值不带单位 scrollWidth和scrollHeight

获取位置: 获取元素内容往左、往上滚出去看不到的距离 ,scrollLeft和scrollTop ,这两个属性是可以修改的

 

offset家族

获取宽高： 获取元素的自身宽高、包含元素自身设置的宽高、padding、border offsetWidth和offsetHeight  

获取位置： 获取元素距离自己定位父级元素的左、上距离

offsetLeft和offsetTop  注意是只读属性

client家族

获取宽高： 获取元素的可见部分宽高（不包含边框，滚动条等） clientWidth和clientHeight

获取位置： 获取左边框和上边框宽度

clientLeft和clientTop   注意是只读属性

会在窗口尺寸改变的时候触发事件： resize