事件流 事件委托

1.事件流

1.事件捕获

 事件捕获概念： 从DOM的根元素开始去执行对应的事件 (从外到里)

 代码：

  说明：

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

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

 若是用 L0 事件监听（onclick），则只有冒泡阶段，没有捕获

2.事件冒泡

事件冒泡概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

 事件冒泡是默认存在的

 L2事件监听第三个参数是 false，或者默认都是冒泡

3.阻止冒泡

 语法：

 注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转 

 语法：

4.解绑事件

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

(2) addEventListener方式，

必须使用： removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

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

5.鼠标经过事件的区别

 鼠标经过事件：

 mouseover 和 mouseout 会有冒泡效果

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

 2.事件委托

 原理：事件委托其实是利用事件冒泡的特点。

 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

 实现：事件对象.target. tagName 可以获得真正触发事件的元素

3.其他事件

1.页面加载事件

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

 有些时候需要等页面资源全部处理完了做一些事情

 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到 

 事件名：load

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

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

 事件名：DOMContentLoaded

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

2.元素滚动事件

 事件名：scroll 

 监听整个页面滚动：

 给 window 或 document 添加 scroll 事件

 监听某个元素的内部滚动直接给某个元素加即可 

 scrollLeft和scrollTop （属性）

 获取被卷去的大小

 获取元素内容往左、往上滚出去看不到的距离

 这两个值是可读写的

 尽量在scroll事件里面获取被卷去的距离

 scrollTo() 方法可把内容滚动到指定的坐标

 语法： 元素.scrollTo(x, y) 

3.页面尺寸事件

 会在窗口尺寸改变的时候触发事件：  resize

 检测屏幕宽度：

页面尺寸事件-获取元素宽高 

 获取宽高：  获取元素的可见部分宽高（不包含边框，margin，滚动条等）

 clientWidth和clientHeight

4.元素尺寸与位置

通过js的方式，得到元素在页面中的位置

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

 offsetWidth和offsetHeight

 获取出来的是数值,方便计算

 注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

 获取位置：  获取元素距离自己定位父级元素的左、上距离

 offsetLeft和offsetTop 注意是只读属性

 获取元素距离自己定位父级元素的左、上距离

 获取位置： element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置

总结：