事件委托改造 tab 栏切换
tab栏切换：前边的案例是 for 循环遍历每个 li 注册鼠标进入事件，给添加了 active类的 a 删除掉 active类，然后给点击的 a 添加上 active类（也就是将已经有的 active 类删除掉，为当前点击到的 a 加上 active类）
现在通过事件委托形式也就是不再给每个 li 注册点击事件给 li 中的 a 删除添加类了，而是给 a 的祖元素注册点击事件，但是其实点击的还是 a ，但是通过冒泡的话 点击 a 是能冒泡到祖先元素的，所以直接通过 祖 元素去监听点击事件
阻止默认行为
其他事件 :
- 页面加载事件
- 页面滚动事件
- 页面尺寸事件
页面加载事件：
- 一般写在 head中的 js 代码是不能 执行，因为代码是从上往下， js 中找不到对应的 html 代码
- 可以先加载外部资源，加载完毕时触发的事件：两种，一种 load , 一种 DOMContentLoaded
页面滚动事件
大多数是想要知道 浏览器页面滚动了多少而不是 某个元素的滚动
div 大于 100 显示，小于 100 隐藏
希望一打开滚动条不是在最顶部，而是与顶部有一段距离 。那么就写在滚动事件监听的外面为页面的滚动赋值，然后再事件监听的里面获取页面滚动的距离数字。
由此可见页面滚动是可读可写的
小兔鲜 电梯导航 案例:
- 获取被卷去的滚动条数
- 判断该条数是否大于300,大于的话就让透明度为1，显示侧边导航。否则就透明度为0，不显示侧边导航
- 为 “顶部”按钮注册点击事件，点击回到页面尺寸为 （0，0）的位置，也就是顶部。也可以注册的是滚动条事件，直接滚动到数字为 0 的位置，也就是顶部
页面尺寸事件
仿京东固定导航栏案例:
- 因为不是显示隐藏，是滑动，所以一开始位置 top 位置是 负的
- 当滚动到 秒杀 模块 之后， top 位置慢慢变成 正数，也就是慢慢滑出来
一开始将 头部位置改为 -80,也就看不见了
如果 滚动到的位置头部大于等于 秒杀 模块的头部位置，那么就将头部导航显现出来，也就是让头部位置为 0 ,否则就是 -80px
改：const n = document.documentElement.scrollTop，图中写错了
还有一种写法就是三元运算符
实现 bilibili 点击小滑块移动效果
- 给 导航 中每个 a 添加点击事件，运用事件委托的形式，也就是 a 的父级元素检测到点击时（其实该点击是 点击的 a ，但是冒泡之后连父级元素也一并点击了，所以父级元素检测到点击事件，也就是点击了 a ，那么就开始执行处理程序）
- 其次之所以还要判断是否点击的是 a ,是因为点击父级元素盒子的其他地方也是有反应的，而我们只是要点击了 a 时候的反应，所以还是要确保点击的是 a 标签。然后将 line线盒子移动到所点击的 事件的 左边位置
电梯导航案例:
防止变量污染，因为两个模块之间没有关系
为侧边导航添加点击事件，点击到的 a 判断其是否添加了 active,如是则删除再添加active类，没有的话就直接添加active类
点击侧边栏的 a ，页面滑动到相应的 板块。
- 侧边栏的 a 中有自定义属性，而相应板块中的类名的最后一部分是相应的 a 中自定义属性值，所以可以获取 a 中自定义 属性值作为变量在获取相应模块元素应用到类时，作为类的最后部分。然后获取相应模块的上滚动距离。
- 将该距离赋值为页面滚动距离
点击侧边栏时相应模块丝滑滚动
页面滚动，滚动到相应模块时给侧边导航相应的 a 加上 active 类
- 首先页面滚动，将所有 active 类删除
- 再者获取 4 个模块的大盒子
- 判断页面滚动距离和各个模块上边距相比如何，在模块之间就加上 active 类
属性选择器
因为 有两个 input ，要选择所需要的那个与另一个的区别是 type 的值，所以属性选择器就是选择出不一样的
两个 input 最明显的就是一个有 value 属性，一个没有，那么就可以直接用 value 属性
