js-day7

1.事件流

1.1 事件流与两个阶段说明

1. 事件流指的是事件完整执行过程中的流动路径
2. 两个阶段：
   1. 捕获阶段（事件捕获）：Document->Element html->Element body->Element div
   2. 冒泡阶段（事件冒泡）：Element div ->Element body->Element html->Document
   3. 简单来说：捕获是父到子，冒泡是子到父

1.2 事件捕获

1. 概念：从DOM的根元素开始去执行对应的事件（从外到里）
2. 代码：DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
3. 说明：
   1. addEventListener第三个参数传入 true 代表是捕获阶段触发
   2. 若传入false代表冒泡阶段触发，默认是false

1.3 事件冒泡

1. 概念：当一个元素的事件被触发时，同样的事情将会在该元素的所有祖先元素中依次被触发。
2. 简单理解：当一个元素触发事件后，会依次向上调用所有父亲组件的同名事件
3. 代码：DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
4. 第三个参数不写或者传入false

1.4 阻止

1. 事件对象.stopPropagation()：阻止传播（包含冒泡、捕获）
2. 事件对象.preventDefault()：阻止默认行为（包含链接跳转，表单域跳转）
3. 在事件绑定的回调函数的第一个参数就是事件对象，一般命名为 event/ev/e

1.5 解绑事件

1. L0

   btn.onclick = function () {alert('点击了')// 解绑事件btn.onclick = null
   }
   

2. L2：removeEventListener(事件类型,事件处理函数,[添加时使用的阶段(true：捕获；false：冒泡])

   function fn() {alert('点击了')
   }
   //这里第三个参数为true的话，解绑的第三个参数也要为true
   btn.addEventListener('click', fn)  
   // 解绑事件
   btn.removeEventListener('click', fn)
   

   注意：匿名函数无法被解绑

2. 事件委托

1. 事件委托是利用事件流的特效解决一些需求的知识技巧
2. 优点：减少注册次数，可以提高程序性能
3. 原理：利用事件冒泡。给父元素注册事件，当我们触发子元素时，会冒泡到父元素上，从而触发父元素的事件。
4. 实现：事件对象.target可以获取到真正触发事件的元素，如果需要加判定条件可以使用事件对象.target.tagName

3. 其他事件

3.1 页面加载事件

1. 加载外部资源（如图片、外联css和js等）加载完毕时触发的事件
   1. 事件名：load
   2. 监听页面所有资源加载完毕：给window添加load事件

      window.addEventListener('load',function(){})
      

   3. 针对某个资源绑定load事件

       const img = document.querySelector('#img')img.addEventListener('load',function(){console.log('图片加载完毕');})
      

2. 当初始的HTML文档被完全加载后，DOMContentLoaded事件被触发，无需等待样式表、图片等完全加载
   1. 事件名：DOMContentLoaded
   2. 监听页面DOM加载完毕：给document添加DOMContentLoaded事件

      document.addEventListener('DOMContentLoaded',function(){})
      

3.2 页面滚动事件

1. 事件名：scroll
2. 监听整个页面的滚动：

   window.addEventListener('scroll',function(){})
   

3. 监听某个元素内部的滚动，给某个元素加即可
4. 获取位置：scrollLeft、scrollTop获取被卷去的大小，可读写
5. 获取页面的滚动：document.documentElement.scrollTop，可以赋值
6. 把内容滚动到指定坐标2：元素.scrollTo(x,y)

3.3 页面尺寸事件

1. 在窗口尺寸改变时触发：resize

   window.addEventListener('resize',function(){})
   

2. 获取宽高：clientWidth和clientHeight（不包含边框、margin、滚动条等）

4. 元素尺寸与位置

1. 获取宽高：offsetWidth/offsetHeight

   1. 获取元素的自身宽高，包含元素自身设置的宽高、padding、border
   2. 取出来的是数值
   3. 注意：获取的是可视宽高，如果盒子是隐藏的，获取的是0
      

2. 获取位置：offsetLeft/offsetTop

   1. 获取元素距离自己最近的具有定位的祖先元素的左、上距离
   2. 注意：offsetLeft 和 offsetTop 是只读属性

3. 返回元素大小及其相对视口的位置：element.getBoundingClientRect()