滚动事件与加载事件

滚动事件

滚动事件

当页面进行滚动触发事件

事件名: scroll

监听整个页面滚动:

window.addEventListener('scroll, function(){})

给window或者document添加scroll事件

监听某个元素的内部滚动直接给某个元添加元素即可

加载事件(一)

加载外部资源(如图片, 外联CSS和JavaScript)加载完毕是触发事件

事件名: load

监听页面所有加载资源完毕:

• 给window添加load事件

  // 页面加载事件
  window.addEventListener('load', function() {})	
  

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

加载事件(二)

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

事件名:DOMContentLoaded

监听页面DOM加载完毕:

• 给document添加DOMContentLoaded事件

  document.addEventListener('DOMContentLoaded', function(){})
  

元素大小与位置

scroll家族

• 获取宽高
  • 获取元素的内容的总宽高(不包含滚动条)返回值不带单位
  • scrollwidth和scrollHeight
• 获取位置
  • 获取元素内容往左,往上卷起来看不见的距离
  • scrollLeft和scrollTop
  • 这两个属性可以修改给值

div.addEventListener('scroll', function(){
    console.log(this,scrollTop)
})

// 页面滚动事件
window.addEventListener('scroll', function(){
    //document.documentELement,scrollTop 获取当前的页面被卷去的头部的距离
    let num = document.documentELement,scrollTop
    console.log(num)
})
# 注意:
#document.documentELement 返回的为html元素文档

offset家族

• 获取宽高
  • 获取元素的自身宽高,包含元素自身设置的宽高,padding border
  • offsetWidth和offsetHeight
• 获取位置
  • 获取元素距离自己定位父级元素的左,上距离
  • offsetLeft和offsetTop只读属性

client家族(一)

• 获取宽高
  • 获取元素的可见部分宽高(不包括边框,滚动条)
  • clientwidth和clientheight
• 获取位置
  • 获取左边框和上边框宽度
  • clientLeft和clientTop 只读属性

client家族(二)

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

resize

window.addEventListener('resize'. function(){})

检测屏幕宽度

window.addEventListener('resize',function(){
    let w document.documentElement.clientwidth
    console.log(w)
})

小结:

1. offset家族
   • 获取元素自身大小: 包括自身设置的宽度, padding, dorder
   • 获取元素距离定位父级的左和上距离,只读属性
2. client家族
   • 获取元素可见区域的大小
   • 获取元素左,上边框距离, 只读属性
3. scroll家族
   • 获取元素内容的总宽高 (隐藏部分也算)
     大小: 包括自身设置的宽度, padding, dorder
   • 获取元素距离定位父级的左和上距离,只读属性
4. client家族
   • 获取元素可见区域的大小
   • 获取元素左,上边框距离, 只读属性
5. scroll家族
   • 获取元素内容的总宽高 (隐藏部分也算)
   • 获取元素向上上卷起看不见的距离,可读写属性