谈谈浏览器的事件机制:捕获、冒泡

浏览器事件的传播有三个阶段：捕获阶段，目标阶段，冒泡阶段

       第一部分称为捕获阶段，该阶段包括从舞台到目标节点的父节点范围内的所有节点。第二部分称为目标阶段，该阶段仅包括目标节点。第三部分称为冒泡阶段。冒泡阶段包括从目标节点的父节点返回到舞台的行程中遇到的节点。

注意：在任何阶段调用 stopPropagation 都将终止本次事件的传播。

直接上代码：

...

root.addEventListener('click',()=>{
  console.log('root捕获')
},true)
parent.addEventListener('click',()=>{
  console.log('parent捕获')
},true)
child.addEventListener('click',()=>{
  console.log('child捕获')
},true)

root.addEventListener('click',()=>{
  console.log('root冒泡')
},false)
parent.addEventListener('click',()=>{
  console.log('parent冒泡')
},false)
child.addEventListener('click',()=>{
  console.log('child冒泡')
},false)

...

实验一：验证捕获阶段和冒泡阶段的执行顺序
点击root层输出： 

点击parent层输出：

点击child层输出：

实验二：在各个流程进行打断
a. 仅在root层捕获阶段停止捕获，点击root层，root层的事件经历捕获阶段，目标阶段，冒泡阶段
b.仅在root层捕获阶段停止捕获，点击child层，会在root层结束捕获，并不再向下传播，整个事件流终止
c.仅在child层冒泡阶段停止冒泡，点击child层，会在child层结束冒泡，并不再向上传播，整个事件流终止