一文彻底搞懂事件机制:冒泡、捕获、传播、委托 以及如何阻止冒泡与捕获

标准的事件流：当dom触发了事件后，会先通过事件传播捕获到事件源，然后事件源通过事件传播实现事件冒泡

事件捕获：鼠标点击或者触发了dom事件，浏览器会从根节点一级一级向内传播，直到找到触发事件源

事件冒泡：在捕获完成后，触发事件源由内到外一级一级向外传播，直到根节点

事件传播：无论是捕获还是冒泡，都是靠事件传播一层一层传递的，当在某一层禁止事件传播，那么之后的步骤就不再进行了

addEventListener(type,listener,useCapture)
简单分析：
type：事件类型
listener：事件监听处理函数
useCapture：设置事件查找方式
false，冒泡事件（默认值）
true， 捕获事件
设置为true后，是在捕获时进行的事件， 默认为false为在冒泡时进行的事件

点击inside

事件委托：当需要给多个平级dom添加相同事件，可以通过事件委托到父节点，通过给父节点添加事件来避免多次添加事件，随着前端框架的普及以及jquery的没落，用的也就比较少了

stopPropagation()
stopPropagation() 与 stopImmediatePropagation() 都实现了阻止事件传播，区别是stopPropagation() 对于该层的其他事件不会阻止，而stopImmediatePropagation()则会阻止

我们实际需要的场景
遇到的需求是项目预览，我们项目预览采用的是实际项目的代码，能够极大的减少开发量，但是在预览时有些操作是不需要的，就需要将某些click事件去掉，但是这些事件是写在实际项目中，是不能进行修改的，所以就想到了通过阻止事件捕获来取消click事件
我们采用的是通过事件委托的方案 给body添加的click事件，如果点击的元素是需要被禁止的元素，那么在事件捕获的过程就禁止掉

  document.querySelector('body')?.addEventListener(
            'click',
            function(event) {
              //todo
            },
            true
        );