Web前端系列技术之Web APIs基础（从基础开始）⑤

Web APIs基础学习五

熟悉了 对象 ，事件 以及一些基础的 DOM操作 和 事件对象 的处理之后，基本上就是可以实现部分网页的基础特效了，例如页面滚动和加载事件，以及典型的轮播图效果；

那么今天主要学习的内容就是：
一、滚动事件
二、加载事件
三、元素大小和位置
四、轮播图

---

---

一、滚动事件

触发条件：
当页面进行滚动时触发的事件；之所以会选择学习滚动事件，就是为了解决在项目中通常页需要检测用户把页面滚动到某个区域后做一些处理的问题， 比如 固定导航栏 ，返回顶部等

① 事件名称：scroll

② 监听整个页面滚动：

//页面滚动事件
window.addEventListener('Scroll', function(){
     //  执行的操作
})

当然这里也可以给除 window 之外的 document 添加 scroll 事件；

⭐注意：监听某个元素的内部滚动直接给某个元素加即可；

---

二、加载事件

触发条件：
当加载外部资源加载完毕时触发的事件，之所以会选择学习加载事件，目的就是为了解决有些时候需要等页面资源处理完再去做一些事情的问题；

1. 页面加载–load

基础理解： 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件；

① 事件名称：load

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

//页面加载事件
window.addEventListener('load', function(){
     //执行的操作
})

⭐注意：

1. 过去通常会把 script 写在 head 中，这时候直接找 dom 元素是无法找不到的；
2. 不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定 load事件；

2. 页面加载–DOMContentLoaded

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

① 事件名称：DOMContentLoaded

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

document.addEventListener('DOMContentLoaded', function(){
      //执行的操作
})

⭐注意：两种加载事件的区别

1. load事件被触发是需要等待样式表、图像等完全加载的；
2. DOMContentLoaded 事件被触发是无需等待样式表、图像等完全加载的；
3. DOMContentLoaded比load执行速度更快，因为它只需要等待DOM渲染完了就可以区执行了

---

三、元素大小和位置

在这里所描述的元素大小和位置是相对于整个页面、父级元素和自己本身而言的，通常情况下，分为三种位置定义，它们分别是接下来所要介绍的 三大家族 ：

1. scroll家族

使用场景： 想要页面滚动一段距离，就让某些元素显示或隐藏，该如何或许所滚动的距离呢？这里就需要使用 scroll 来检测页面滚动的距离；

① 获取宽高：

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

②获取位置：

• 获取元素内容往左、往上滚出去看不到的距离（滚动的宽度，和滚动的高度）；
• scrollLeft 和 scrollTop；
• 这两个属性是可以读取可以修改的；

结构样式图：

基础代码样例：

//页面滚动事件
window.addEventListener('scroll', function(){
    let num = document.documentElement.scrollTop
    console.log(num)
})

⭐注意：document.documentElement HTML 文档返回对象为HTML元素；

2. offset家族

使用场景： 简单说，就是通过js的方式，得到元素在页面中的位置，实现当页面滚动到某个位置，就可以触发一定的事件效果；

① 获取宽高：

• 获取元素的自身宽高、包含元素自身设置的宽高、padding、border（不包括margin）；
• offsetWidth和offsetHeight；

② 获取位置：

• 获取元素距离自己定位父级元素的左、上距离；
• offsetLeft和offsetTop 注意是只读属性不可修改；

结构样式图：

3. client家族

使用场景： 不太常用的；

① 获取宽高：

• 获取元素的可见部分宽高（不包含边框，滚动条等）；
• clientWidth和clientHeight
  ② 获取位置：
• 获取左边框和上边框宽度，可以理解为内容到边框的距离，也就是边框的宽度；
• clientLeft和clientTop 注意是只读属性不可修改

结构样式图：

1. 窗口改变触发事件

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

基础代码结构：

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

检测屏幕宽度：

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

⭐注意：在没有媒体查询的时候，就是通过目前这个方法实现的改变视口宽度改变内容；好处就是：简单了代码的编写

---

四、轮播图

具体代码：

    // 需求①：小图标鼠标经过事件
    // 鼠标经过小图片，当前高亮，其余兄弟变淡  添加类
    let lis = document.querySelectorAll('.indicator li')
    let piclis = document.querySelectorAll('.slides ul li')
    let text = document.querySelector('.extra h3')
    let next = document.querySelector('.next')
    let prev = document.querySelector('.prev')
    let main = document.querySelector('.main')
    // 给多个小li绑定事件
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('mouseenter', function () {
        // 选出唯一的那个active ，删除类
        document.querySelector('.indicator .active').classList.remove('active')
        // 鼠标经过谁，谁加上active 这个类
        this.classList.add('active')
        // 需求② ：大图片跟随变化  一定要放到鼠标经过事件里面
        // 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入      淡出的效果，还是添加类
        // 选出唯一的那个active ，删除类
        document.querySelector('.slides ul .active').classList.remove('active')
        // 对应序号的那个 li，谁加上active 这个类
        piclis[i].classList.add('active')
        text.innerHTML = `第${i + 1}张图的描述信息`
        // 需求④：解决一个BUG
        // 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
        // 解决方案：  让变化量 index 重新赋值为 当前鼠标经过的索引号
        // 鼠标经过了那个小li 他的索引号就是 i 
        // 右侧按钮是通过 index 来了控制播放的
        index = i
      })
    }
    // 需求③：右侧按钮播放效果
    //   点击右侧按钮，可以自动播放下一张图片
    //   需要一个变化量  index 不断自增
    //   然后播放下一张图片
    //   如果到了最后一张，必须要还原为第1张图片
    //   索引号 = 索引号 % 数组长度 （放到播放前面）
    let index = 0  // 全局变量  信号量 控制器 为了给 右侧按钮和左侧按钮同时使用
    next.addEventListener('click', function () {
      index++
      // 选出 index 小图片 做操作
      // console.log(index)
      // if (index === lis.length) {
      //   index = 0
      // }
      index = index % lis.length
      common()
    })
    // 需求⑤：左侧按钮播放效果
    //   点击左侧按钮，可以自动播放上一张图片
    //   需要一个变化量  index 不断自减
    //   然后播放上一张图片
    //   如果到了第一张，必须要从最后一张播放
    //   索引号 = (数组长度 + 索引号) % 数组长度
    prev.addEventListener('click', function () {
      index--
      // 选出 index 小图片 做操作
      // console.log(index)
      if (index < 0) {
        index = lis.length - 1
      }
      // index = (lis.length + index) % lis.length
      common()
    })
    // 需求⑥：
    //   因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common
    function common() {
      document.querySelector('.indicator .active').classList.remove('active')
      lis[index].classList.add('active')
      // 选出 index 大图片 做操作
      document.querySelector('.slides ul .active').classList.remove('active')
      piclis[index].classList.add('active')
      text.innerHTML = `第${index + 1}张图的描述信息`
    }
    // 需求⑦：开启定时器
    //   其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， next.click()
    let timer = setInterval(function () {
      // 自动调用右侧按钮的点击事件
      next.click()
    }, 1000)
    // 需求⑧：
    //   鼠标经过停止定时器 （清除定时器）
    main.addEventListener('mouseenter', function () {
      clearInterval(timer)
    })
    //   鼠标离开开启定时器 （开启定时器）
    main.addEventListener('mouseleave', function () {
      timer = setInterval(function () {
        // 自动调用右侧按钮的点击事件
        next.click()
      }, 1000)
    })

具体效果如图所示：

---

总结

今天是继续学习Web APIs的第五天，内容不多，但练习极为重要，今天所总结出来的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位 点赞+收藏+关注 啦! ! !

---

以上就是所要介绍的Web APIs基础学习的第五节内容，后续即将更新前端开发的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下JavaScript基础学习的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！