JavaScript WebAPIs 第五章

Web APIs

DOM - 网页特效篇

滚动事件和加载事件

• 滚动事件：

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

  用途：检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

  事件名：scroll

// 监听整个页面滚动
// 页面滚动事件(给<window>或<document>添加scroll事件)
window.addEventListener('scroll',function(){
    // 执行的操作
})

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

• 加载事件：

• 1.1

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

  用途：等页面资源全部处理完了做一些事情、老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

  事件名：load

// 监听页面所有资源加载完毕： 给 window 添加 load 事件
// 页面加载事件
window.addEventListener('load',function(){
    // 执行的操作
})

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

• 1.2

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

  事件名：DOMContentLoaded

// 监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件
document.addEvnetListener('DOMContentLoaded',function(){
    // 执行的操作
})

元素大小和位置

• scroll家族

• 获得宽高

  获取元素的内容总宽高（不包含滚动条）返回值不带单位 内容 + padding + 溢出

  scrollWidth 和 scrollHeight

• 获得位置

  获取元素内容往左、往上滚出去看不到的距离

  scrollLeft和scrollTop

  这两个属性是可以修改的

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

• 检测页面滚动的距离 document.documentElement.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家族

• 获取宽高

  获取元素的可见部分宽高 内容 + padding

  clientWidth 和 clientHeight

• 获取位置：

  获取左边框和上边框宽度

  clientLeft和clientTop 注意是只读属性

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

window.addEventListener('resize',function(){
    // 执行的代码
})

• 检测屏幕宽度：

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