事件进阶

一.事件流

事件流指的是事件完整执行过程中的流动路径

当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

事件捕获:

元素.addEventListener('click', 回调函数，是否使用捕获)

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）

若传入false代表冒泡阶段触发，默认就是 false

事件冒泡:

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。

事件冒泡是默认存在的，或者第三个参数传入 false 都是冒泡

阻止冒泡

问题：因为默认就有冒泡阶段的存在，所以容易导致事件影响到父级元素（祖先元素）

需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

鼠标经过事件的区别：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

二.事件委托

事件委托(Event Delegation)：是JavaScript中注册事件的常用技巧，也称为事件委派、事件代理

**优点：**减少注册次数，可以提高程序性能

**原理：**事件委托是利用了事件冒泡的特点

三.阻止默认行为

阻止元素发生默认的行为

例如：当点击提交按钮时阻止对表单的提交 ; 阻止链接的跳转等等

语法： 对象.preventDefault()

四.移除事件监听

移除事件处理函数，也称为解绑事件

移除L2事件监听:

addEventListener方式注册，必须使用： removeEventListener(事件类型, 事件处理函

数, [捕获或者冒泡阶段])

移除L0事件监听:

on事件方式，直接使用null覆盖就可以实现事件的解绑

指的是函数内部特殊的 this , 它指向一个对象，并且受当前环境影响

**作用：**弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同

【谁调用， this 就是谁】是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

五.其他事件

1.页面加载事件

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

事件名：load

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

事件名：DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后就触发，而无需等待样式表、图像等完全加载

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

2.页面滚动事件

事件名：scroll

scrollLeft和scrollTop （属性）获取被卷去的左侧和头部; 这两个值是可读写的

3 .页面尺寸事件

事件名: resize

clientWidth和clientHeight : 获取元素的可见部分宽高（不包含border，margin，滚动条等）

4.元素尺寸与位置

offsetWidth 和 offsetHeight

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

返回的是数字不带单位，并且是只读属性

offsetLeft 和 offsetTop

获取元素距离自己定位父级元素的左、上边距，跟绝对定位类似如果父级都没有定位则以浏览器文档为准