js事件流

 

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

 事件流分为捕获阶段和冒泡阶段

捕获阶段是从父到子；冒泡阶段是从子到父

事件冒泡：

 

事件冒泡概念：

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

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件，例如：都是'click',儿子触发，相同的事件的祖宗才会触发

事件冒泡是默认存在的

 事件捕获：

从DOM的根元素开始去执行对应的事件（从外到里）

事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

说明

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

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

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

阻止事件流动：

 目标：能够写出阻止事件流动的代码

因为默认就有冒泡行为的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前的元素内，就需要阻止事件流动

阻止事件流动就需要拿到事件对象

语法：

事件对象.stopPropagation()

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

 

鼠标经过事件：

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave 没有冒泡效果（推荐使用）

阻止默认行为方法：