Web APIs-事件流/事件委托/阻止默认行为/页面加载/滚动/尺寸事件

事件进阶

一.事件流

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

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

事件捕获:

元素.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

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

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

dding、border

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

offsetLeft 和 offsetTop

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

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