一、事件流
1.1 事件流与两个阶段说明
事件流 指的是事件完整执行过程中的流动路径
假设页面有个div标签，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
捕获阶段：Document - Element html - Elementbody - Element div 简单来说就是父到子
冒泡阶段：Element div - Elementbody - Element html - Document 简单来说就是子到父
事件冒泡的过程与事件捕获完全相反
实际工作都是使用事件冒泡为主
事件对象.stopPropagation()
1.2 事件捕获
从DOM的根元素开始去执行对应的事件（从外到里）
语法：
元素对象.addEventListener('事件类型',function (){}, 是否使用捕获机制)
说明：
addEventListener的第三个参数传入true代表是捕获阶段触发
若传入false代表冒泡阶段触发，默认就是false
若是使用L0事件监听，则只有冒泡阶段，没有捕获
例：
<style> .father{ width: 500px; height: 300px; background-color: lightskyblue; } .son{ width: 200px; height: 100px; background-color: black; } </style> <body> <div class="father"> <div class="son"></div> </div> <script> const fa = document.querySelector('.father') const son = document.querySelector('.son') document.addEventListener('click',function (){ alert('我是一级') }, true) fa.addEventListener('click',function (){ alert('我是二级') }, true) son.addEventListener('click',function (){ alert('我是三级') }, true) // 一级 二级 三级 </script> </body>弹出顺序 我是一级，我是二级，我是三级。
1.3 事件冒泡
定义：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。简单理解就是当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听的第三个参数默认传的就是false,代表这个事件进行冒泡
例：
<style> .father{ width: 500px; height: 300px; background-color: lightskyblue; } .son{ width: 200px; height: 100px; background-color: black; } </style> <body> <div class="father"> <div class="son"></div> </div> <script> const fa = document.querySelector('.father') const son = document.querySelector('.son') document.addEventListener('click',function (){ alert('我是一级') }) fa.addEventListener('click',function (){ alert('我是二级') }) son.addEventListener('click',function (e){ alert('我是三级') e.stopPropagation() // 借助事件对象 进行流的阶段 }) // 默认的就是false 就是冒泡 冒泡同名事件 // 三级 二级 一级 // 阻止冒泡 或者 捕获 就是 事件对象.stopPropagation() </script> </body>触发顺序：
我是三级，我是二级，我是一级
1.4 阻止冒泡
原因：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内，就需要阻止事件冒泡。
语法：
事件对象.stopPropagation() 不仅可以阻止事件冒泡还和阻止事件捕获。
<style> .father{ width: 500px; height: 300px; background-color: lightskyblue; } .son{ width: 200px; height: 100px; background-color: black; } </style> <body> <div class="father"> <div class="son"></div> </div> <script> const fa = document.querySelector('.father') const son = document.querySelector('.son') document.addEventListener('click',function (){ alert('我是一级') }) fa.addEventListener('click',function (){ alert('我是二级') }) son.addEventListener('click',function (e){ alert('我是三级') e.stopPropagation() // 借助事件对象 进行流的阶段 }) // 阻止冒泡 或者 捕获 就是 事件对象.stopPropagation() </script> </body>还有其他的阻止默认行为，比如表单的默认提交，链接的跳转，表单域跳转。
如:事件对象.preventDefault()
<body> <form action="http://www.baidu.com"> <input type="submit" value="提交"> </form> <script> const form = document.querySelector('form'); form.addEventListener('click', function(e) { // 阻止表单默认提交行为 e.preventDefault(); }); </script> </body>
1.5 解绑事件
对应L0的on事件 可以直接使用null覆盖就可以实现事件的解绑
<body> <button>按钮</button> <script> const btn = document.querySelector('button') // L0的解绑方式 btn.onclick = function (){ alert('点击了') } btn.onclick = null // 给一个空对象 进行解绑 </script> </body>addEventListener方式，必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
<body> <button>按钮</button> <script> const btn = document.querySelector('button') //最新的 L2 function fn() { alert('点击了') } btn.addEventListener('click',fn) // L2 事件解绑 函数不能使用匿名函数 btn.removeEventListener('click',fn) </script> </body>注： 匿名函数无法被解绑
二、事件委托
定义：
事件委托是利用事件流的特征解决一些开发需求的知识技巧，可以同时给多个元素注册相同事件。
优点：
减少注册次数，可以提高程序性能
原理：
事件委托其实是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事 件
实现
事件对象.target 是获取点击触发事件的元素对象
事件对象.target. tagName 可以获得真正触发事件的元素的名称(大写)，如li的tagName就是‘LI’
<body> <ul> <li>第1个孩子</li> <li>第2个孩子</li> <li>第3个孩子</li> <li>第4个孩子</li> <li>第5个孩子</li> <p>我不需要变颜色</p> </ul> <script> const ul = document.querySelector('ul') ul.addEventListener('click',function (e){ // 获取点击的对象 console.log(e.target); //只有点击li才会有效果 // 找到真正触发的元素 e.target.tagName === 'LI' ? e.target.style.color = 'red' : null }) </script> </body>
三、其他事件
3.1 页面加载事件
页面加载事件一
定义：加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
监听页面所有资源加载完毕：给window添加load事件
注：
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
<head> <meta charset="UTF-8"> <title>页面加载事件</title> <!--JS写在上面 必须要用的加载事件--> <script> // 监听整个页面资源加载完毕 // 等待页面所有资源加载完成后，再去执行回调函数 load //给window 添加 load事件 window.addEventListener('load',function (){ const btn = document.querySelector('button') btn.addEventListener('click',function (){ alert('点击了 按钮') }) }) // 针对某个资源绑定 load 事件 document.querySelector('img').addEventListener('load',function (){ // 等待图片加载完毕，再去执行里面的代码 }) </script> </head> <body> <button>按钮</button> <img src=""> </body>页面加载事件二
定义：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：给 document 添加 DOMContentLoaded事件
<head> <meta charset="UTF-8"> <title>页面加载事件</title> <!--JS写在上面 必须要用的加载事件--> <script> //监听页面DOM加载完毕 //给document添加DOMContentLoaded事件 // 无需等待样式表 图像等完全加载 document.addEventListener('DOMContentLoaded',function (){ // 执行的操作 }) </script> </head> <body> <button>按钮</button> <img src=""> </body>
3.2 页面滚动事件
使用场景：很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
定义：滚动条在滚动的时候持续触发的事件
事件名：scroll
作用：监听整个页面滚动，给 window 或 document 添加 scroll 事件(监听某个元素的内部滚动直接给某个元素加即可)
// 页面滚动事件 // 可以给window 也可以给 document 加 // 检测滚动的距离 //document.documentElement.scrollTop = 800 被卷去的头部 window.addEventListener('scroll',function (){ console.log('gun了')
3.2.1 页面滚动事件-获取位置
属性：scrollLeft和scrollTop
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
注：
尽量在scroll事件里面获取被卷去的距离
获取html 页面的最大标签元素 document.documentElement
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素。
<style> body { padding-left: 100px; height: 3000px; } div { overflow: scroll; margin: 0 auto; height: 500px; width: 300px; border: 1px solid black; } </style> <body> <div>里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字 里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字 里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字 里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字 里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字...... </div> <script> window.addEventListener('scroll',function (){ // 获取html 页面的最大标签元素 document.documentElement const n = document.documentElement.scrollTop // 是数字型数据 可读写 if (n>= 100){ div.style.display = 'block' } else { div.style.display = 'none' } }) </script> </body>
3.2.2页面滚动事件-滚动到指定的坐标
方法：scrollTo() 方法可把内容滚动到指定的坐标
语法：
元素对象.scrollTo(x, y)
例：让页面滚动到 y 轴（页面垂直方向）1000像素的位置
window.scrollTo(0, 1000) // 也相当于 document.documentElement.scrollTop = 0
3.3 页面尺寸事件
事件名：resize，会在窗口尺寸改变的时候触发事件
获取元素宽高
事件名：clientWidth和clientHeight，获取元素的可见部分宽高（不包含边框，margin，滚动条等）
<style> div { display: inline-block; height: 200px; background-color: lightskyblue; padding: 10px; border: 20px solid black; } </style> <body> <div>121235453134532</div> <script> const div = document.querySelector('div'); // 获取盒子的宽 或者 高 不包含边框 滚动条等 console.log(div.clientWidth) // resize 页面缩放 浏览器窗口 大小发生变化的时候触发的事件 // 目前更好的是CSS的媒体查询 window.addEventListener('resize',function (){ console.log(1) }) </script> </body>
四、元素尺寸与位置
作用：
就是通过js的方式，得到元素在页面中的位置
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
获取位置1：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop （注意是只读属性）
<style> div { margin: 100px; width: 300px; height: 300px; border: 1px solid black; background-color: lightskyblue; } div p { padding: 50px; width: 100px; height: 100px; background-color: pink; } </style> <body> <div> <p></p> </div> <script> // 获取元素距离自己定位祖先元素的左offsetLeft 上offsetTop 距离 // 获取的位置 是包含 边框的 const div = document.querySelector('div') const p = document.querySelector('p') // 外边框 到 最左边的距离 margin + body 的8外边框 console.log(div.offsetLeft) // 加上外边框到最左边的距离 margin + body 的8外边框 + div的1外边框 console.log(p.offsetLeft) </script> </body>获取位置2：
元素对象.getBoundingClientRect()，方法返回元素的大小及其相对于视口的位置
<style> body { height: 2000px; } div { width: 300px; height: 300px; margin: 100px auto; background-color: lightskyblue; } </style> <body> <div></div> <script> const div = document.querySelector('div') // 是盒子相对于当前视口的位置 console.log(div.getBoundingClientRect()); </script> </body>
五、 页面滚动事件和元素尺寸事件的属性总结
属性 作用 说明 scrollLeft和scrollTop 被卷去的左侧和头部 配合页面滚动来用，可读写 clientWidth和clientHeight 获得元素宽度和高度 不包含border,margin，滚动条 用于js 获取元素大小，只读属性 offsetWidth和offsetHeight 获得元素宽度和高度 包含border、padding，滚动条等，只读 offsetLeft和offsetTop 获取元素距离自己定位祖先元素的左、上距离 获取元素位置的时候使用，只读属性
