5.事件流

如果有一个事件，当这个事件发生后，就会开始执行一个流程，分为三个阶段，捕获、目标、冒泡，这个流程称之为事件流

捕获阶段

在事件发生时，从最外层向目标元素寻找的一个过程
window → document → html → body → ... → 目标元素的父级 → 目标元素

目标阶段

找到目标元素之后，如果该元素身上有事件处理函数，则它会执行事件处理函数（这里不分冒泡和捕获，只分代码的先后顺序，谁在前，就先执行谁）

btn.addEventListener('click',function(){
    console.log('捕获阶段');
},true);
btn.addEventListener('click',function(){
    console.log('冒泡阶段');
},false);
//这段代码在点击以后，控制台输出的顺序是 1.'捕获阶段' 2.'冒泡阶段'

btn.addEventListener('click',function(){
    console.log('冒泡阶段');
},false);
btn.addEventListener('click',function(){
    console.log('捕获阶段');
},true);
//这段代码在点击以后，控制台输出的顺序是 1.'冒泡阶段' 2.'捕获阶段'

冒泡阶段

从目标元素的上一层开始往外层寻找的一个过程
目标元素 → 目标元素的父级 → ... → body → html → document →window

注意

不论是捕获阶段还是冒泡阶段，在寻找目标元素还有向外返回的过程中，所遇到的每一个元素，如果它们身上有相同事件，那么它们的事件处理函数都会被调用

即如果通过click事件触发了事件流的形成，那么在捕获或者冒泡阶段（除去目标元素），碰到的任何具有click事件的元素，它们身上的事件处理函数都会执行
但是这里会存在一个执行阶段的问题：
碰到的具有click事件的元素，如果它的click事件是由addEventListener( , ,false)或者on来添加的，那么则会在冒泡的过程中，执行这个函数
碰到的具有click事件的元素，如果它的click事件是由addEventListener( , ,true)来添加的，那么则会在捕获的过程中，执行这个函数