* 表单全选文本框案例
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消，并且若复选框都选，则全选键也选，否则不选
分析：
1、全选复选框点击，可以得到当前按钮的checked
2、把下面所有的小复选框状态checked，改为和全选复选框一直
该案例的基础样式为：
<style>* {margin: 0;padding: 0;}.head {display: flex;justify-content: space-around;width: 1000px;height: 60px;margin: 0 auto;align-items: center;background-color: skyblue;} .head div {font-size: 20px;}.head div input {width: 20px;height: 20px;}table {width: 1000px;height: 180px;margin: 0 auto;}th {width: 250px;height: 60px;}</style>基础的html代码为：
<div class="head"><div><input type="checkbox">全选</div><div>商品</div><div>商家</div><div>价格</div></div><table border="1"><tr><th><input type="checkbox">选择</th><th>衣服</th><th>西西</th><th>一个小目标</th></tr><tr><th><input type="checkbox">选择</th><th>裤子</th><th>小三</th><th>0.1</th></tr><tr><th><input type="checkbox">选择</th><th>内内</th><th>小夏</th><th>很多</th></tr></table>添加的JavaScript代码为：
<script>const inp_all=document.querySelector('.head div input')const inp_con=document.querySelectorAll('table tr th input')console.log(inp_all.checked)inp_all.addEventListener('click',function() {for(let i=0;i<inp_con.length;i++){inp_con[i].checked=inp_all.checked}})for(let i=0;i<inp_con.length;i++) {inp_con[i].addEventListener('click',function() {if(document.querySelectorAll('table tr th input:checked').length===inp_con.length) {inp_all.checked=true}else{inp_all.checked=false}})}</script>则可实现效果
1、事件流
事件流和两个阶段说明
事件流指的是事件完整执行过程中的流动路径
假设页面中有个div标签，当触发事件时，会经历两个阶段，要经过冒泡阶段与捕获阶段
简单来说，捕获阶段是 从父到字 冒泡阶段是从子到父
实际工作中都是使用事件冒泡为主
1、事件捕获
概念：从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
代码
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)说明：
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用L0事件监听，则只有冒泡阶段，没有捕获
2、事件冒泡
概念：当一个元素的事件被触发时，同样的事件将会再该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是false，或者默认都是冒泡
3、阻止冒泡
问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
语法：
事件对象.stopPropagation()注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
* 我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
语法：
e.preventDefault()4、事件解绑
on事件方式，直接使用null覆盖on就可以实现事件的解绑
语法：
//绑定事件
btn.onclick=function() {alert('点击了')
}
//解绑事件
btn.onclick=nulladdEventListener方式，必须使用：
removeEventListener（事件类型，事件处理函数，[获取捕获或者冒泡阶段])
注意：匿名函数无法被解绑
* 鼠标经过事件的区别
鼠标经过事件：mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐）
2、事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，就会冒泡给父元素，从而触发父元素的事件
实现：事件对象.target.tagName 可以获得真正触发事件的元素
例如：
<body><ul><li></li><li></li><li></li><li></li><li></li></ul><script>const lis=document.querySelector('ul')lis.addEventListener('click',function() {alert('冒泡了')})</script>
</body>点击li中的盒子，也可以触发点击事件
* 若只想对点击的元素进行函数操作，只需要用到事件对象”e.target“就可以实现了
3、其他事件
1、页面加载事件
加载外部资源，加载完毕时触发的事件
场景：有时候需要等页面资源全部处理完了做一些事情
事件名：load
监听页面所有资源加载完毕：
给window添加load事件
例如：
window.addEventListener('load',function() {//执行的代码
})如果该script代码写在了head标签内部，可以使用这个代码来执行内部的代码，否则无法获取到dom元素
当初始的HTML文档被完全加载和解析完成之后，DOMcontentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMcontentLoaded
监听页面的DOM加载完毕
给document添加该事件
2、元素滚动事件
滚动条在滚动的时候持续触发的事件
场景：很多网页需要检测用户把页面滚动到某一个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面的滚动：
window.addEventListener('scroll',function() {//执行的操作
})监听某个元素的内部滚动直接给某个元素添加即可
使用场景：
我们想要页面滚动一段距离，比如100px，就让某些元素显示或者隐藏，那我们怎么知道，页面滚动了100px，可以使用scroll来检测滚动的距离
* 页面滚动事件-获取位置
scrollLeft和scrollTop（属性）
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
例如，点击返回顶部的按钮
<body><div><button>返回顶部</button></div><script>const button=document.querySelector('div')window.addEventListener('scroll',function() {const n=document.documentElement.scrollTopif(n>=100) {console.log('11')button.style.position='fixed'button.style.top='0'}else{button.style.position='relative'}})button.addEventListener('click',function(e) {let timeif(e.target.tagName==='BUTTON'){time=setInterval(function() {document.documentElement.scrollTop-=10if(document.documentElement.scrollTop===0){clearInterval(time)}},'1')}})</script>
</body>3、页面尺寸事件
会在窗口尺寸改变的时候触发事件：
resize
window.addEventListener('resize',function() {//执行的代码
})检测屏幕宽度
window.addEventListener('resize',function() {let w=document.documentElement.clientWidthconsole.log(w)
})* 页面尺寸事件-获取元素宽高
获取宽高：
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight
4、元素尺寸与位置
使用场景：
可以用于当页面滚动到某个元素，就可以做某些事
通过js的方式，得到元素在页面中的位置
当页面滚动这个位置的时候，就可以进行某些操作，省去计算
获取宽高：
获取元素的自身宽度、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值，方便计算
注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性
