js事件流

什么是js事件流

事件流描述的是从页面中接受事件的顺序。

微软（IE）和网景（Netscape）开发团队提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
接下来就是介绍这两种事件流概念

---

事件冒泡流，

事件冒泡就是从目标事件开始，把事件一点一点像父元素传递

事件捕获流。

事件捕获就是从父元素流向目标元素

Dom事件流

DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

---

事件处理程序

响应某个事件的函数就叫做事件处理程序（事件监听器），事件处理程序的名字以on开头，click=>onclick、load=>onload

DOM2提供了两个方法来让我们处理和删除事件处理程序的操作：addEventListener()和removeEventListener

addEventListener()和removeEventListener的第三个参数能够规定采用什么事件流

 btn.addEventListener('click', function () {
             alert('事件捕获');
        }, true);

 btn.addEventListener('click', function () {
            alert('事件冒泡');
        }, false);

事件对象

触发dom上的某个事件时，会产生一个事件对象，里面包含着所有和事件有关的信息。

比较常用的有以下几个

currentTarget 事件处理程序当前正在处理事件的那个元素（始终等于this）

preventDefault 取消事件默认行为,比如链接的跳转

stopPropagation 取消事件冒泡

target 事件的目标

阻止事件冒泡

1、stopImmediatePropagation方法：

stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行

2、stopPropagation方法：

stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序

用法

parent.addEventListener('click', (e) => {
    e.stopPropagation()
    //或者
    e.stopImmediatePropagation()
    
    console.log('parent 捕获1');
}, true)